尝试将2个区块彼此相邻地定位
我正在创建一个网页，并试图使用div标签创建我的站点的基本轮廓，但是，我创建了一个侧导航div和body div。我的网站的大小是1500px宽，1000px高，侧导航是300px，主体是1200px。
我以为这会把它们并排放在一起，但是，由于某种原因，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>我也尝试过使用百分比来实现这一点，但是，百分比似乎不适合我。有谁知道如何解决我的问题吗？谢谢。
回答 4
Stack Overflow用户
发布于 2015-08-06 21:53:12
只需在sideNav类中包含一个float:left，以便将另一个div向右推，
小提琴url：https://jsfiddle.net/eugensunic/j030jyjm/
#sideNav {
float:left;
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}Stack Overflow用户
发布于 2015-08-06 21:57:30
让你的侧面导航向左漂浮。这应该可以解决您的问题。
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
float: left;
padding: 5px;
}Stack Overflow用户
发布于 2015-08-06 22:07:41
div是块元素-这意味着，默认情况下，每个新div将从新行开始。因此，我们需要通过CSS取消该行为。我们可以使用“浮动”属性来使div彼此相邻移动：
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
float: left;
}一旦你添加了浮点数，你就可以将它全部切换回%，它也会工作得很好。
将来，如果可能的话，我鼓励您考虑一下HTML5，因为它有更好的标记名，可以减少您正在使用的div的数量。这使得代码更整洁、更具可读性。
https://stackoverflow.com/questions/31857501
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号