Верхний край всегда равен

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> 

Как я могу получить максимальную маржу, равную?

, когда у меня есть браузер на полную ширину дивы отображаются один рядом с другим, если размер окна браузера уменьшается, я хотел бы пробелы быть равными.

JsFiddle добавил:

https://jsfiddle.net/9b1ojqL3/

Если открыть JsFiddle вы видите 4 квадрата с разными высотами, все в одной строке (4 колонки), при изменении размеров браузера, так что вы видите только 2 колонки вы видите, что вы видите на изображении выше, с большим разрывом между 1-м и 4-м диванами.

Заранее благодарю за любые ответы.

Answer 1

Может быть, вы можете использовать column-count CSS свойство с @media запросов:

JSFiddle