html - 根据内部内容自动调整div

Question

所以我试图让 div 高度根据其中内容的高度自动调整。这是我目前的工作:

<div id="content">
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
</div>

#content {
margin: 0px auto;
margin-top: 10px;
border: 1px solid;
width: 920px;
}

#item {
display: block;
width: 220px;
height: 250px;
border: 1px solid;
margin-left: 6px;
margin-bottom: 5px;
float: left;
}

我发现，当我没有将“float: left”应用于“item”div 时，它确实有效，但是当我应用 float: left 时，高度并未根据内部内容设置。知道如何解决这个问题吗？

Answer 1

应用 overflow: hidden; 到 #content 或清除 float 。

此外，您使用的每个 ID 在文档中都必须是唯一的。 像你在这里做的那样使用 ID 是不好的:

<div id="item"></div>
<div id="item"></div>

对这些事情使用class 属性。

带溢出的演示:http://jsfiddle.net/9WSFf/1/

其次，你可以这样做:

#content:after
{
    content:"";
    clear:left;
    display: block;
}

演示:http://jsfiddle.net/9WSFf/2/