所以,我有这个:
HTML:
<div id="main">
<div id="top"></div>
<div id="mid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="bottom">
</div>
</div>
CSS:
#main {
height: auto;
width: 300px;
background: black;
}
#top {
height: 1px;
width: 300px;
background: yellow;
}
#mid {
height: auto;
width: 300px;
}
.item {
height: 20px;
width: 90px;
color: red;
float: left;
margin-left: 2px;
margin-top: 2px;
}
#bottom {
width: 300px;
height: 1px;
background: yellow;
}
Demo
基本上,这应该是一个导航菜单。显然,它是实际站点上的简化版本,但是从功能上来说,这应该是有效的。
#main是整个对象的主要包装,它包含所有元素。因此,它具有高度:auto;因为它的高度取决于里面的物品数量。
#top只是一个空的div,具有不同的背景颜色以用作顶部边框(在网站上,这是图片,因此需要div)。
然后#mid将包含所有实际项目(是的,您可以说这不一定是必需的,但是它的存在对当前的问题没有影响)。
然后,.item将成为整个对象中的实际列表项。现在,如果您尝试使用该代码,您会发现在整个父级div中,只有3个项目适合水平行,从第4个项目开始,它将开始新的一行;那么如果您添加更多内容,它将再次从7号开始添加新行。
到目前为止,还不错,但问题是在第一行之后div #main和#mid的高度没有增加;尽管高度很高,但它们完全忽略了下面创建的任何行:auto; 。为什么会这样以及如何解决呢?
最佳答案
我已经与您的demo合作,并做了一个working update
我改变了什么:
我已从height: auto;
中删除了#main
,因为这已经是标准值,不需要设置
我添加了一个所谓的clearfix(google it)来清除浮动项目。如果您浮动元素,则该元素将从常规文档流中删除,因此这是必需的
添加了CSS:(Clearfix source)
.cf:after{
content: "";
display: table;
clear: both;
}
添加了HTML:
<!-- added class="cf" -->
<div id="mid" class="cf">