Div頂部邊距總是等於

Question

我想知道如何獲得始終相同的頂部邊距，如果我縮短瀏覽器窗口的寬度，下面的代碼會給我帶來更大的差距。

<div style="float:left; width:100px; margin:5px; height:100px; background-color:blue"></div> 
<div style="float:left; width:100px; margin:5px; height:70px; background-color:blue"></div> 
<div style="float:left; width:100px; margin:5px; height:50px; background-color:blue"></div> 
<div style="float:left; width:100px; margin:5px; height:30px; background-color:blue"></div> 

我怎樣才能得到最高邊緣alwas平等？

當我在全寬的div顯示一個挨着另一個瀏覽器中，如果瀏覽器尺寸減小時，我想的間隙是相等的。

的jsfiddle補充說：

https://jsfiddle.net/9b1ojqL3/

如果打開的jsfiddle你看到4個方格不同hights，都在同一個線路（4列），如果調整瀏覽器，讓你只看到2列你可以看到你在上圖中看到的是什麼，第一和第四格之間的差距很大。

非常感謝您提供任何答案。

Answer 1

也許你可以使用column-count CSS屬性與@media查詢：

JSFiddle