管理div之間的空間（動態高度，向左浮動）

Question

我的頁面中有多個動態左對齊div，因爲div是動態的，因此高度會有所不同。我想管理div之間的空白區域。請告訴我如何使用CSS或JavaScript做到這一點。 請參見下圖（這只是爲了說明）

Answer 1

這就是所謂的砌體佈局。嘗試查看flexbox或列布局。下面是一些例子：

• https://designshack.net/articles/css/masonry/
• https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.z9kxauh63

Answer 2

一種方法是：你可以做三列，每列加每三格。

第二種方法是：'Masonry.js'，我經常使用。 http://masonry.desandro.com/ 它很容易因此我建議吧：

HTML：

<div class="grid"> 
    <div class="grid-item">...</div> 
    <div class="grid-item grid-item--width2">...</div> 
    <div class="grid-item">...</div> 
</div> 

CSS：

.grid-item { width: 200px; } 
.grid-item--width2 { width: 400px; } 

的jQuery：

$('.grid').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: 200 
});