Как реализовать плавающие относительно высоты div блоки?

Question

[ZedRott]

Традиционно div блоки с параметром float:left (или float:right) при достаточной ширине документа выстраиваются по горизонтали, а если ширины не хватает - оставшиеся выстраиваются столбиком. Однако, если эти div-блоки имеют разную высоту, то между рядами столбика из них будут большие отступы, тянущиеся аж до следующего ряда.

Более наглядно:


Так вот: как мне выстроить n-ное количество div-блоков разной высоты и одинаковой ширины без непредвиденных отступов между ними?

Схематично:


Примечание: высота у блоков будет разниться максимум на 50 пикселей. Схема желаемого результата гротескна.

Answer 1

[Арсений Ильяшов]

Оберните блоки в 2 колонки и пропишите соответствующие float'ы у этих колонок.

Comments

[ZedRott]

Не особенно подходит, ибо эти блоки предназначены для вывода заметок из базы данных. Если так делать - надо в два цикла их заполнять. Но, думаю, стоит попробовать.

[Арсений Ильяшов]

ZedRott: как вариант просто у блоков float: left прописать, но там, возможно, придется еще у последнего блока расположение править.

Answer 2

[Сергей Мельников]

Хорошее решение, как уже указывали, masonry.desandro.com/, но можно заморочиться с css свойством flexbox, но оно новое, еще в стадии стандартизации и сложно в понимании frontender.info/a-guide-to-flexbox

Comments

[ZedRott]

"Page not found" (для первой ссылки)