html - 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>

如何使顶部边距始终相等？

当浏览器全宽时，div 会一个接一个地显示，如果浏览器尺寸缩小，我希望间距相等。

JsFiddle 添加:

https://jsfiddle.net/9b1ojqL3/

如果您打开 JsFiddle，您会看到 4 个具有不同高度的方 block ，全部在一行(4 列)中，如果您调整浏览器的大小以便您只看到 2 列，您将看到与上图中所见完全相同的内容，带有第 1 格和第 4 格之间的差距很大。

预先感谢您的任何回答。

Answer 1

也许您可以将 column-count css 属性与 @media 查询一起使用:

JSFiddle