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

在我的网页中，我有一些互动程序。我想把瓷砖分成两列展示。在前两块瓷砖之后，下两块瓷砖应位于其正下方。由于高度可变，我无法使它正常工作

这是我到目前为止得到的

HTML:

---

不确定我是否理解您的问题，但您可能希望将一个类放在奇数块上，然后

清除：左

。我更新了您的。您可以添加clearfix。一个

div

元素，用于清除所有浮动并重新启动流程

---

如果您要使用大小可变的容器创建某种类型的平铺，我强烈建议您使用一个名为的优秀jQuery插件删除浮动：左并添加显示：内联块

---

希望能有帮助

我想你要找的是

内联块

：

HTML

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

---

如果需要支持IE6或IE7，可以通过设置缩放来触发

hasLayout

。如果您想了解更多关于它的信息，有一篇关于它的好文章。

这可以通过专栏来完成，尽管是有限的（即直到IE10才支持IE）。请参阅下面的或代码

CSS

HTML

你想让他们排在最上面还是什么，因为就我所见，最下面的两个在最上面的两个下面？你的目标是什么？每行两个容器？也可以是

。内容：第n个孩子（2n+1）

而不是额外的类。通过您的更改，我看到绿色和蓝色之间有一些差距。我想看到所有间隔相等的瓷砖。假设每种颜色都是div，它们的间隔都是相等的，那么在这个链接中是否可能更清楚。我想这样做。@xpy

：nth child

当然是一个优雅的解决方案。不过，要使其充分向后兼容，可能需要比这个简单的答案多一点。通过您的更改，我看到绿色和蓝色之间存在一些差距。我想看到所有间隔相等的瓷砖。假设每种颜色都是div，它们的间隔都是相等的，那么在这个链接中是否可能更清楚。我想这样做。啊，我现在明白你的意思了，你可以这样做，把左边和右边的添加到他们自己的容器中，这是最好的方法。如果你想让它保持同样的高度，我建议只使用最小高度。要在IE中实现这一点，我将使用最小高度快速破解。他就是一个例子：老实说，我认为只使用CSS的方法（比如@xpy comment中的方法）是最好、最简单、最优雅的解决方案。您不必在DOM中添加无用的元素（因此可以保持内容/表示之间的分离），如果动态添加内容，您可以用更简单的方法来处理它，尤其是当您必须清除每两个元素时。

<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>

.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;
 }

<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>

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

.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;
}

<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>