空白を埋める

Question

以下に示すように、紫色、淡い青色と黄色はより低い位置にあります。私はそれらの上のスペースを埋めるようにしたいと思います。行ごとに4つの列を修正しましたが、各列の高さは修正されません。どのように私はこの動的にすることができますか？これを得るための

Answer 1

使用

display : inline-block; 
float : left; 
clear : none 

Answer 2

使用フレキシボックスのレイアウト。

次のようなものが役立ちます。下のcssをボックスのコンテナで使用し、ボックスの幅と高さを設定します。高さは動的にすることができます。ボックスの高さをautoまたはパーセント値のいずれかに設定します。

.container{ 
    width:200px; 
    display: -ms-flexbox; 
    -ms-flex-direction: column; 
    -ms-flex-wrap: wrap; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 100vw; 
}