<分区>
标签 html css percentage
<分区>
我正在创建一个网页，并试图通过使用 div 标签来创建我的网站的基本轮廓，但是，我制作了一个侧面导航 div 和 body div。我的网站大小为 1500 像素宽和 1000 像素高，侧边导航为 300 像素，正文为 1200 像素。
我认为这会将它们并排放置，但是由于某种原因，body div 位于侧边导航 div 的下方。
<body>
<div id="encase">
<div id="topNav">
<p> topNav </p>
</div>
<div id="header">
<p> header</p>
</div>
<div id="wholeBody">
<div id="sideNav">
<p> sideNav </p>
</div>
<div id="body1">
<p> body1 </p>
</div>
</div>
<div id="footer">
<p> footer </p>
</div>
</div>
这是CSS
<style>
#encase {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#header {
background-color:black;
width: 1490px;
height:110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#topNav {
background-color:green;
width: 1490px;
height: 50px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#wholeBody {
background-color: red;
width: 1490px;
height: 690px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}
#body1 {
background-color: purple;
width: 1190px;
height: 690px;
margin-left: 16%;
padding: 5px;
}
#footer {
background-color: blue;
width: 1490px;
height: 110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
</style>
我也尝试使用百分比来做到这一点，但是，百分比似乎对我来说效果不佳。有谁知道如何解决我的问题？谢谢。
最佳答案
将侧边导航向左浮动。这应该可以解决您的问题。
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
float: left;
padding: 5px;
}
关于html - 尝试将 2 个 block 彼此相邻放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31857501/