Question

我有4个div设置为float:left;，每个width: 400px; div width:800px;。这当前创建了一个2 x 2网格的精确对齐的div我设置了min-height: 150px;的属性，因为我需要允许divs在添加或删除新内容时展开。

如果添加了新的内容，div会被扩展，这会让我目前拥有的2 x 2网格格式变得混乱，因为高度不均匀，无论如何都在这周围？

<div class="boxContainer">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
}

Answer 1

只使用display as block，因为你向左浮动，你必须分配宽度，这样它们就不会移动到位，一旦添加文本，高度将自动增长，min-高度，不适用于旧浏览器，并将被视为高度，这是可怕的:) http://www.webtoolkit.info/css-clearfix.html你有一个漂亮的CSS解决你的浮动左问题，它用于容器保持div自然 -

是的，检查你是否有

或其他元素，它们有预定义的填充和边距，:)它们可能有点痛苦：）

我建议使用clearfix，因为它适用于，检查web开发人员工具（如firebug）和google web dev工具:)上的元素。

所以你完全掌控这里是代码:)

<div class="boxContainer clearfix">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
    display: block;
}
/* I would put this at the top of the page, and minimise the newlines :) if you want to remove the "." (dot) then use this  content: "\00A0"; which puts a whitespace,  */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 2

实际上对我不起作用：http://jsfiddle.net/MMDqX/; D

如果浏览器兼容性（至少ie6或更旧，如果我没记错的话）不是一个问题，可能使用tabled布局可以工作，即div与display：table

e.g。 http://jsfiddle.net/MMDqX/1/

使用带最小高度的浮子的2 x 2 div网格

2 个答案: