Question

所以我试图根据里面内容的高度自动调整divs高度。这是我目前的工作：

<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;
}

我发现当我不申请“漂浮：左”时到＆＃39;项目＆＃39; div它确实有效，但是当我应用float时：左边没有根据里面的内容设置高度。关于如何解决这个问题的任何想法？

Answer 1

这是因为项目是浮动的。当元素浮动时，它会从文档的正常流中移除自身。这就是当你浮动div项时父div崩溃的原因。

你应该使用明确的修复。

一种方法是在最后一个div项之后添加div，并在其中添加clear:both样式。

另一种方法是对父div使用一些“hack”：

.parent:before,
.parent:after {
    content: "";
    display: table;
} 
.parent:after {
    clear: both;
}

Answer 2

您已将静态高度应用于#item，删除此属性并自动调整高度。

Answer 3

将overflow: hidden;应用于#content或清除浮动。

您使用的每个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/

Answer 4

请检查此JS FIDDLE

CSS

#content {
  margin: 0px auto;
  margin-top: 10px;
  border: 1px solid;
  width: 920px;
 }
.clear {
  clear:both;
 }
 #item {
    display: block;
    width: 220px;
    height: 250px;
    border: 1px solid;
    margin-left: 6px;
    margin-bottom: 5px;
    float: left;
  }

请在最后一项id div

之后申请清楚：

根据内容自动调整div

4 个答案: