Как сделать так, чтобы между блоками разной высоты не было пустого пространства по вертикали?

Question

[Dmitry Buravtsov]

Как сделать так, чтобы между блоками разной высоты не было пустого пространства по вертикали? Привожу пример того что нужно, и что у меня получается. Использую float: left , но это не помогает. Может есть какие-нибудь "рецепты" создания подобной структуры.
Так должно быть:

А вот так получается:

Answer 1

[Дима Паутов]

Сделайте 3 колонки и в них вставляйте эти блоки

Comments

[Dmitry Buravtsov]

Спасибо! Помогло

Answer 2

[Сергей Хабаров]

Может, будет еще полезно
masonry.desandro.com

Comments

[Dmitry Buravtsov]

Спасибо, тоже вариант, но в данном случае CSS/HTML достаточно

Answer 3

[Сергей delphinpro]

columns-count: 3;
columns-gap: 20px;
для контейнера блоков. сами блоки - inline-block
Плюсы в том, что не нужно рассчитывать количество блоков, как при делении на три столбика и не нужен джаваскрипт, как в случае с масонри
Минус, как всегда, в поддержке браузерами (тут от ТЗ зависит).

Answer 4

[gera7]

Из всего что приходит в голову, наиболее разумное это:
Присвоить блокам display:inline-block, а потом блокам которые надо подтянуть вверх присваиваем класс и в нем свойство.
margin-top: - xxx px;
То есть у каждого блока который надо подтянуть вверху будет свой класс, со своим значением для свойства margin-top. В общем придется поиграться немного.
float вообще убрать.

P.S. Возможно сюда заглянет гуру и даст более дельный совет=)

Comments

[Dmitry Buravtsov]

Это подходит только для статической верстки. Такой же идеей можно и position: relative и подгонять top и bottom

[gera7]

Стоп, так все ведь гораздо проще! Тут лишь надо сделать часть блоков float:left, а другу float:right; и в правильной очередности расположить их в html коде!

[Dmitry Buravtsov]

Тоже делал, там можно голову сломать подбирая очередность) В любом случае ответы уже есть выше

Answer 5

[Евгений Конкин]

У меня была такая ситуация, и я ее решил просто, но сейчас я не дома.
Попробуй после каждого блока поставить пустой div со стилем clear:both