我尝试并排定义两个 div。左边是div内容,右边是div侧边栏。这两个 div 位于容器 div 内。我尝试了几种不同的方法,但都不起作用。这是我的 CSS 代码:
#container {
width:1000px;
position: relative;
}
#content {
width:700px;
background-color: white;
border-top: 3px solid midnightblue;
padding: 80px 10px 0px 10px;
float:left;
}
#sidebar{
border-top: 3px solid midnightblue;
background-color:#E0E0E0;
padding: 20px;
width: 250px;
float:left;
}
html 代码如下:
<div id="container">
<div id="content">
<p> This is my blog website. </p>
</div>
<div id="sidebar">
<p>This is the sidebar. </p>
</div>
</div>
我还尝试将侧边栏中的“float:left”更改为“float:right”,我还添加了:“display:table;”在容器中。但它也没有用。侧边栏始终位于内容区域下方,它不会显示在内容 div 的右侧。
在最外面,有一个包装类。如果我删除了包装器类和容器,那么它将起作用。但我需要包装类。有什么建议么?谢谢你!
最佳答案
制作 box-sizing: border-box
。 Know more about box-sizing
只需在 CSS 中添加以下代码。
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
关于html - 容器内有两个 float 的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28164684/