Плавающие дивы с переменной высотой (упорядочить)

Question

У меня есть простая проблема, связанная с расположением плавающих div с переменной высотой.

Цель:

Результат:

У меня просто есть контейнеры div с css float: left; и высота не определена. Первый красный кружок показал, что моя техника не работает, хотя вторая доказывает, что я не прав, показывая, что она работает. К сожалению, последний (не на скриншотах) просто начинает плавать после высоты предыдущего (так что слева есть целое пустое место).

Как мне решить эту проблему?

Спасибо!

Answer 1

Я не думаю, что это выполнимо на 100% с помощью "just" css, но jquery-masonry должна добиться цели [http://desandro.com/resources/jquery-masonry/].Хорошо, но я надеюсь, что кто-то доказывает, что я не прав:)

Answer 2

У вас есть два столбца. Затем кодируйте его соответственно:

<div class="column">
    contents of first column
</div>
<div class="column">
    contents of second column
</div>

(вы установите значение float: left в столбце DIV)