具有不同高度的 CSS Floating Div 与它们之间的空间对齐

Question

我正在使用左浮动 DIV 来模拟两列布局(每个 div 包含用于编辑不同数据的文本字段，例如姓名、爱好等)。所以它应该是这样的

1 2
3 4
5 6

现在我的 div-box 并不总是相同的，因为一些 DIV 比其他的有更多的元素。现在我的布局看起来像这样

   1 2
     2 
   3 4
   5 6

你也可以在this example上看到效果如果你缩放你的以便只显示四个或三个列。例如。如果连续显示 4 列，则 Float 1 和 Float 6 之间有很多空间。这在我的 UI 上看起来不太好。我想要的是在 Float 1 之后有 Float 6，中间没有空格(我定义的边距除外)

编辑:我的 DIV 基本上只包含一个 float:left 和一个 width:40%，以便两个适合屏幕

这是显示更多 的屏幕截图

Answer 1

这是一个纯 CSS 解决方案。我拍了this例子

如果您想了解更多信息，请查看。他还使用 jQuery Masonry作为后备。

CSS:

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

HTML:

<div class="masonry">
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
    <div class="item">Incidunt sit unde minima in nostrum? Incidunt sit unde minima in nostrum?</div>
    <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
    <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
    <div class="item">Incidunt sit unde minima in nostrum?</div>
    <div class="item">Incidunt sit unde minima in unde minima in unde minima in nostrum?</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
    <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>

希望对您有所帮助。谢谢。