CSS - 如何使用浮动来去除空白垂直空间

Question

使用浮动布局时，下一个浮动元素会占用至少相同数量的垂直空间或更多，然后才会在换行后向下流动。在下面的图像中存在大量未使用的空白空间。

我该如何获得更多类似这样的东西？

这里有一个 JSFiddle 示例。

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

- IPV3001

---

它需要“绝对”定位。使用CSS浮动不可能（可能是可能的，但不够灵活）。请查看jQuery Masonry / Isotope插件或Salvatore。 - Hashem Qolami

谢谢！Masonry解决了问题！如果您将此作为答案发布而不是评论，我会选择它（您是第一个提到它的人）。 - IPV3001

谢谢，但是由于这个问题已经被问了几次，我宁愿把它留作评论。 - Hashem Qolami

Answer 1

有一个技巧可以填补空间，添加以下内容：

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

看看这个: JSFiddle

虽然建议像Hachem Qolami在评论中指出的那样使用类似于jQuery Masonry等内容。

- Johan Karlsson

---

这肯定是比使用 JavaScript 插件或为每个元素添加唯一类的解决方案要好得多，尽管有些取巧。 - Magnus

Answer 2

仅使用CSS无法达到100％的浏览器兼容性，也无法完美地将其顶部对齐而不使用JavaScript。您可以使用一个名为masonry的库：http://masonry.desandro.com/。我不是在宣传它，只是试图为您提供一个简单而非常好的解决方案来解决您的问题。

- n1kkou

Answer 3

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

但是，如果这可以帮助您，有一种简单的方法可以确保每行始终有一定数量的元素：

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

这并不能回答你的问题，但或许能帮助其他人。

- user3476725

---

这并不保证每行总是有3个.someBlock，它只保证每行最多有3个.someBlock。 - Johan Karlsson

那只是纠缠细节罢了。我的意思很明显，假设至少有三个带有类名".someBlock"的元素，上述CSS代码确保每行始终有三个这样的元素。 - user3476725

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在上面的评论中所说的那样。

- passatgt