修复了侧边栏重叠的页面内容？
我使用css和html制作了一个侧边栏。然而，无论我做什么，当我试图在我的HTML页面上放入一些内容时，它都会放在页面的左上角，在侧边栏下面。如何将固定内容放置在页面的右侧？
下面显示的是我的css代码，如果有什么东西阻止主要内容位于页面的右中心，请告诉我。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.sidebar a {
display: block;
padding: 10px;
}
body {
background-color: white;
}
.sidebar {
margin: 14px;
padding: 0;
width: 175px;
position: fixed;
height: 100%;
overflow: auto;
text-align: left;
margin-left: 30px;
}<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<link href="myMenuStyle.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css? family=Bungee+Hairline&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<meta charset="utf-8">
<link rel="import" href="TableOfContent.html">
<title>about me</title>
<link rel="icon" href="cool.ico">
</head>
<body>
<!-- The sidebar -->
<div class="sidebar">
<a id='one' href="TableOfContent.html" style="font-weight: bold">Table of Content</a>
<p><u>Visual Communication:</u></p>
<bl>
<a id='two' class='click' href="GraphicD.html">Graphic Design</a>
<a id='three' class='click' href="Illustration.html">Illustration</a>
<a id='four' class='click' href="Photography.html">Photography</a>
<p><u>Multi Media/Digital Media:</u></p>
<a id='five' class='click' href="Scripting.html">Scripting</a>
<a id='six' class='click' href="Sound.html">Sound</a>
<p><u>Programming:</u></p>
<a id='seven' class='click' href="Coding.html">Coding</a>
<a id='eight' class='click' href="Game.html">Interactive/Game Design</a>
<a id='nine' class='click' href="Arduino.html">Hardware/Electrical Circuit</a>
<p><br></p>
</div>
<!-- Page content -->
<p>Testing</p>
</body>
</html>解决方案
您需要首先定义FlexBox布局以从左到右组织内容，这与默认的从上到下的HTMLDOM行为形成对比。要做到这一点，首先将整个容器包装在div中，然后在其上应用display: flex。然后将flex-direction: row设置为从左到右进行排序。但是，当您将块定义为position: fixed时，它将从文档模型中取出，因此您的右侧内容将显示在左侧fixed位置块下。要解决这一问题，请在右侧内容上加上左边距(根据左侧容器的宽度，约为15%)。
我对HTML文件进行了几处更改以应用FlexBox：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.sidebar a {
display: block;
padding: 10px;
}
body {
background-color: white;
}
.sidebar {
margin: 14px;
padding: 0;
width: 175px;
position: fixed;
height: 100%;
text-align: left;
margin-left: 30px;
}
.main {
display: flex;
flex-direction: row;
}
.content {
margin-top: 20px;
margin-left: 15%;
}<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<link href="myMenuStyle.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css? family=Bungee+Hairline&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<meta charset="utf-8">
<link rel="import" href="TableOfContent.html">
<title>about me</title>
<link rel="icon" href="cool.ico">
</head>
<body>
<!-- The sidebar -->
<div class="main">
<div class="sidebar">
<a id='one' href="TableOfContent.html" style="font-weight: bold">Table of
Content</a>
<p><u>Visual Communication:</u></p>
<bl>
<a id='two' class='click' href="GraphicD.html">Graphic Design</a>
<a id='three' class='click' href="Illustration.html">Illustration</a>
<a id='four' class='click' href="Photography.html">Photography</a>
<p><u>Multi Media/Digital Media:</u></p>
<a id='five' class='click' href="Scripting.html">Scripting</a>
<a id='six' class='click' href="Sound.html">Sound</a>
<p><u>Programming:</u></p>
<a id='seven' class='click' href="Coding.html">Coding</a>
<a id='eight' class='click' href="Game.html">Interactive/Game Design</a>
<a id='nine' class='click' href="Arduino.html">Hardware/Electrical Circuit</a>
<p><br></p>
</div>
<!-- Page content -->
<div class="content">
<p>Testing</p>
</div>
</div>
</body>
</html>有关Flexbox的详细信息-here
相关文章