基于里面的内容自动调整DIV(Auto adjusting div based on inside

所以我想做一个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;
}

我发现，当我不实行“浮动：左”到它的工作的“项目”申报单，但是当我申请浮动：左高度不是根据里面的内容集。 关于如何解决此问题的任何想法？

Answer 1:

适用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 2:

这是因为项目浮动。 当元件是浮动的，它从文档的正常流动删除自身。 这就是为什么当你漂浮在div项目父DIV崩溃。

你应该用明确的定位。

一种方法是最后一个div项目之后加一个div，并添加clear:both在它的风格。

另一种方法是使用一些“黑客”父DIV：

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

Answer 3:

你已经申请静态高度#item，去掉这个属性，它会自动调整大小的高度。

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

文章来源: Auto adjusting div based on inside content