Question

所以，我有这个：

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; 。为什么会如此以及如何解决？

Answer 1

我与您的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">

Answer 2

通过在css属性之后添加！important来尝试它。例如：#mid { height: auto !important; width: 300px !important; }

Answer 3

你必须将div声明一个元素的div的高度推入de div并且清除：both; 这使得div容器的高度与所有浮动项目的高度相同。在这里你有：

http://jsfiddle.net/hitaboy/cXaws/4/

<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 class="clearer"></div>
    </div>
    <div id="bottom"></div>
</div>

Div似乎没有延伸高度

3 个答案: