html - 如何让 div tiles 正确 float 而没有间隙

Question

在我的网页中有一些磁贴。我想在两列中显示瓷砖。在前两 block 瓷砖之后，接下来的两 block 瓷砖应该在它的正下方。由于高度可变，我无法使其正常工作。

这是我到目前为止得到的结果。

HTML:

<div class = "content" style="color:Red"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:green"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:black"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:blue"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>

CSS:

.content {
    border: solid 1px #C8C8C8;
    -moz-border-radius: 25px; 
    width :45%;
    height : auto;
    float:left;
    margin-left: 10px;
    margin-top:20px;
    box-shadow: 3px 3px 3px 0px #C8C8C8;
    cursor:pointer;
 }

http://jsfiddle.net/yKuBr/

Answer 1

您可以添加一个 clearfix。一个 div 元素，用于清除所有 float 并重新开始流程。

http://jsfiddle.net/yKuBr/2/