所以,我有这个:

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">

10-05 20:56
查看更多