因此,我尝试根据内部内容的高度自动调整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;
}
我发现当我不将'float:left'应用于有效的'item'div时,但是当我确实应用float:left时,高度不会根据内部内容进行设置。关于如何解决此问题的任何想法?
适用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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句