我想创建一个"记分卡"网格输出一些数据。如果每个div.item中的数据都是相同的高度,那么每个div.item上留下一个简单的浮点数会提供一个漂亮的均匀布局,可以根据浏览器大小很好地扩展和缩小。
如果数据是可变的,每个div中的行数不同,那么元素浮动的方式会产生不均匀且混乱的输出。请参阅下面的代码示例如果使用以下内容创建页面,请将浏览器的大小调整为大约800px宽,以便框1,2和3创建"行"在顶部,然后是4,5和6.如何让7下拉到下一行,以便创建一行以及8和9?
显然,如果你调整浏览器的大小以便每行显示4个div,则数字9是我要在5以下分解的元素。是否有一些明显的我缺少或者我需要使用一些Javascript来实现这一点吗?
div.item{
float:left;
width:220px;
background-color:#DBDBDB;
margin:8px;
}
h1, p{
padding:4px;
margin:0;
}

<div class='item'>
<h1>1</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>2</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>3</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
&#13;
答案 0 :(得分:39)
将"float: left;"
更改为"display: inline-block;
vertical-align: top;"
它将以你想要的方式工作。
示例:http://jsfiddle.net/yK9eY/2/
div.item {
display: inline-block;
*display: inline;
width:220px;
background-color:#DBDBDB;
margin:8px;
vertical-align: top;
zoom: 1;
}
h1, p {
padding: 4px;
margin: 0;
}
<div class='item'>
<h1>1</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>2</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>3</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>4</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>5</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>More Content</p>
<p>More Content</p>
</div>
<div class='item'>
<h1>6</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>7</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>8</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>9</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
答案 1 :(得分:0)
用容器包裹所有div并向其提供.container { overflow: hidden; }
或.container { overflow: auto }
。
第二种方法是用容器包装所有div并将另一个div放到所有div的底部,并给出一个类名称,例如“clear”并将其设置为样式.clear { clear: both }