Как сделать двухколонную ленту google+?

Question

[Шухратджон Джумаев]

У меня есть такая лента:


Как видите есть пустые области между блоками. Как сделать так чтобы этих пустых блоков не было?
У меня код довольно простой.
Блоки конечно разделены div-ами. A CSS такой что я просто тупа даю им display: inline-block; с фиксированной шириной 420 пикселей, А вот высота может менятся.

Есть какие нибудь идеи или решения?

Можно использовать все что указал в тегах:

Answer 1

[#rybak]

Вот пользуйтесь на здоровье.

Comments

[Шухратджон Джумаев]

а нельзя, ли обойтись без всяких фреймворков?

[#rybak]

Шухратджон Джумаев это самый удачный вариант из тех что я использовал
посмотрите еще тут (не пробовал, но похоже это то, что вам нужно)
w3bits.com/css-masonry

[Шухратджон Джумаев]

#rybak: Сначала я обрадовался использовав ваш второй вариант, а потом понял что блоки выводится не так как нужно то есть:
второй блок идет не справа от первого блока а снизу и третий тоже снизу, этот вариант не подошел.
Поэтому я остановился на вашем первом варианте и использую фреймворк пока не найдется другой способ. Спасибо

[Шухратджон Джумаев]

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

[#rybak]

Шухратджон Джумаев я так понимаю высота меняется, когда добавляются комментарии?

[Шухратджон Джумаев]

#rybak: да

[#rybak]

www.code-pal.com/css3-based-masonry-layout-with-jq...

[Шухратджон Джумаев]

#rybak: Тут тоже как и в втором варианте второй блок идет не справа от первого блока а снизу и третий тоже снизу и так до самого низа а потом второй блок начинается. А мне нужно чтоб второй шел справа

[#rybak]

Шухратджон Джумаев: попробуйте еще поискать по запросу masonry
возможно придется дописывать скрипт самостоятельно.

Answer 2

[Михаил]

так не пойдет? https://jsfiddle.net/xrbjre7b/

Comments

[Шухратджон Джумаев]

А если вот так: https://jsfiddle.net/79pk1poc/ опять пустая область

[Шухратджон Джумаев]

Как я написал выше высота блоков разная, их разница может быть очень высоким. Ваш код работает отлично пока разница высоты блоков небольшая попробуйте изменить высоту второго блока на 300px а высоту третьего блока на 200px и вы поймете все.