Question

在我的网页上，我有一些瓷砖。我想用两个颜色显示瓷砖。在前两个瓷砖接下来两个瓷砖应该在它下面。由于高度可变，我无法使其正常工作。

这是我到目前为止所得到的。

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元素，用于清除所有浮动并重新开始流动。

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

Answer 2

不确定我是否理解了您的问题，但您可能希望在奇数编号的图块和clear:left上放置一个类。我更新了您的fiddle。

Answer 3

如果您打算使用可变大小的容器创建某种平铺，我强烈建议您使用名为Isotope的优秀jQuery插件

Answer 4

删除 float：left 并添加 display：inline-block

希望它有所帮助!!

Answer 5

我认为你要找的是inline-block：

HTML

<div class = "content ib" 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 ib" style="color:green"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>

等等，然后在你的CSS中：

.ib {
    float:none;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
}

您可以看到小提琴here的修改版本。

如果您需要支持IE6或7，可以通过设置hasLayout来触发zoom。如果您想了解更多相关信息，Robert Nyman上有一篇很好的文章。

Answer 6

这可以使用CSS列来完成，尽管browser support是有限的（即在IE10之前不支持IE）。请参阅下面的demo或代码。

CSS

.content {
    border: solid 1px #C8C8C8;
    -moz-border-radius: 25px; 
    margin-left: 10px;
    margin-bottom:20px;
    box-shadow: 3px 3px 3px 0px #C8C8C8;
    cursor:pointer;
    display:block;
    width:95%
}

.cols {
    -webkit-column-count:2;
    -webkit-column-gap:10px;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
}

HTML

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

如何将div瓷砖正确地浮动而没有间隙

6 个答案: