填滿空白

Question

如下圖所示，紫色，淡藍色和黃色位於下方。我希望他們填滿他們上面的空間。我有一個修復每行4列，但每列的高度不會被修復。我怎樣才能使這種動態？

Answer 1

使用

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

Answer 2

使用Flexbox的佈局獲得此。

像下面的東西將有所幫助。在盒子的容器中使用下面的CSS，然後設置盒子的寬度和高度。高度可以是動態的。將箱子的高度設置爲自動或百分比值。

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