管理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

一种方法是：你可以做三列，每列添加第三个div。

第二种方式是：＆＃39; Masonry.js＆＃39;，我经常使用。 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
});