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

Question

我正在使用左浮动DIV来模拟两列布局(每个div包含用于编辑不同数据的文本字段,如名称,爱好,......).所以看起来应该是这样的

1 2
3 4
5 6

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

   1 2
     2 
   3 4
   5 6

如果您缩放,则还可以看到此示例的效果,以便仅显示四个或三个列.例如,如果连续显示4列,则Float 1和Float 6之间有很多空间.这在我的UI上看起来不太好.我想要的是Float 6跟Float 1之间没有空格(除了我定义的边距)

编辑:我的DIV基本上只包含一个浮点数:左边和宽度:40%,这样两个适合屏幕

这是一个截图显示更多

Answer 1

在jQuery的砌体插件将不正是你想要的.

如果你想坚持使用纯CSS,你可以不喜欢以下,但我不认为这是你要的内容:

<div class="col">
   <div class="one"></div>
   <div class="three"></div>
   <div class="five"></div>
   <div class="seven"></div>
</div>
<div class="col">
   <div class="two"></div>
   <div class="four"></div>
   <div class="six"></div>
   <div class="eight">who do we appreciate</div>
</div>

而CSS:

.col {
    float: left;
    width: 200px;
}

Answer 2

这是一个纯CSS解决方案.我拿了这个例子

如果您想了解更多信息,请查看它.他还使用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>

希望这会帮助你.谢谢.