根据内部内容自动调整 div答案

【问题标题】：Auto adjusting div based on inside content根据内部内容自动调整 div
【发布时间】：2014-07-01 09:54:34
【问题描述】：

所以我试图根据其中内容的高度自动调整 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 时，高度不会根据里面的内容来设置。关于如何解决这个问题的任何想法？

【问题讨论】：

提示：您不应该在 html 中重复 ID。问：为什么不能使用float :left？

标签： html css layout

【解决方案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/

【讨论】：

很高兴它有帮助。祝你好运！

【解决方案2】：

这是因为项目是浮动的。当一个元素浮动时，它将自己从文档的正常流程中移除。这就是浮动 div 项时父 div 折叠的原因。

你应该使用 clear fix。

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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 之后

【讨论】：