Div top margin始终等于

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>

如何才能使上边距相等？

当我将浏览器设置为全宽时，div会一个接一个地显示，如果浏览器大小减小，我希望间隙相等。

JsFiddle补充道：

https://jsfiddle.net/9b1ojqL3/

如果您打开JsFiddle，您会看到4个不同高度的正方形，所有这些都在一行（4列）中，如果您调整浏览器的大小，以便只看到2列，您可以看到上面图像中看到的内容，第1和第4分区之间的巨大差距。

提前感谢您的任何答案。