div間のスペースを管理する（動的高さ、浮動小数点型）

Question

divはダイナミックなので、高さが異なるため、私のページに複数の動的左揃えdivがあります。 div間の空きスペースを管理したいCSSやJavaScriptでどうやってやるか教えてください。 これは石造レイアウトと呼ばれる

Answer 1

（それだけで説明のためである）画像の下を参照してください。フレックスボックスまたは列のレイアウトを見てみてください。ここではいくつかの例は以下のとおりです。

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

Answer 2

一つの方法は次のとおりです。次の3つのコラムを行うと、列ごとに、すべての第三のdivを追加することができます。

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