CSS - 如何通过浮动摆脱空的垂直空间

Question

当您使用浮动时，下一个浮动元素将占用至少相同数量的垂直空间或更多，然后断开线并在流中降低。在下面的图片中有很多未使用的空白区域。

我怎样才能得到更多这样的东西？

这是一个小提琴。 http://jsfiddle.net/BamBamm/4x51qLt4/1/

<div class="someBlock">...</div>
<div class="someBlock">...</div>
<div class="someBlock">...</div>
<div class="someBlock">...</div>

.someBlock {
    display: inline-block;
    vertical-align:top;
    width: 30%;
    float: left;
}

（（从这里复制的图像：http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/））

Answer 1

有一个黑客填补空间，添加这个：

.someBlock{
    margin-bottom: -100%;
    padding-bottom: 100%;
    overflow: hidden;
}

检查出来：JSFiddle

虽然我建议使用像jQuery Masonry这样的东西，正如Hachem Qolami在评论中指出的那样。

Answer 2

如果没有js，你无法实现100％浏览器兼容纯css和完美对齐顶部。您可以使用名为masonry的库：http://masonry.desandro.com/。我不会为它做广告，只是试图给你一个简单而且非常好的解决方案来解决你的问题。

Answer 3

正如Hashem Qolami ha指出的那样，你想要实现的目标不仅仅是通过CSS实现的。您需要计算不同块的高度。

但是，如果这有助于你，有一种简单的方法可以确保每行总有一定数量的元素：

.someBlock:nth-of-type(3n+1) {
    clear : both;
}

这不会回答你的问题，但也许会帮助别人。

Answer 4

如果div的顺序不重要，可以像这样使用css3列属性：

body {
     -webkit-column-count: 3;  -webkit-column-gap: 15px; /* Chrome, Safari 3 */
     -moz-column-count: 3;     -moz-column-gap: 15px; /* Firefox 3.5+ */
          column-count: 3;          column-gap: 15px; /* Opera 11+ */
}

演示：http://jsfiddle.net/ytf66xm7/（您可以看到它将从上到下填充，而不是从左到右）

如果你需要一个从左到右的布局，只有解决这个问题的方法就是使用JS，比如Masonry或Salvattore，就像Hashem Qolami在上面的评论中所说的那样。