管理div之间的空间（动态高度，向左浮动）

Question

I have multiple dynamic left aligned divs in my page, since the divs are dynamic so the heights will be different. I want to manage the empty space between divs . please tell me how to do it with css or javascript. Please see below image (it is just for explanation)

Answer 1

This is called Masonry layout. Try to look at flexbox or column layout. Here are some examples:

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

Answer 2

One way is: You can do three column and add every third div per column.

Second way is: 'Masonry.js', that i use often. http://masonry.desandro.com/ its easy so i recomend it:

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
});