根据内部内容自动调整div

邓肯·帕尔默(Duncan Palmer)

因此,我尝试根据内部内容的高度自动调整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;
}

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章