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