Я работаю над адаптивным веб-дизайном, который размещает несколько элементов в 4 столбцах рядом. Эти элементы имеют разную высоту и, следовательно, плавающие элементы не работают должным образом.

Вот что происходит в данный момент:

неверный плавающий файл http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

Любые идеи о том, как заставить элементы плавать так:

плавающее право http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

Я думаю, это должно работать с jQuery "masonry", верно? Однако я работаю с Zepto.js и полагаю, что плагин jQuery не будет работать.

Есть ли какой-то чистый способ CSS (CSS3) к этому? Какой-то трюк или так?

Если это не будет работать с чистым CSS или с JS, возможно ли это сделать:

плавающие разные http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

Теперь второй ряд с элементами 5, 6 и 7 не является "действительно" плавающий так, как вы ожидаете, но внутри есть скрытый разрыв строки (clearfix).

Есть ли способ для этого с чистым CSS? Например. использованиеnth-child(4n+4) и псевдо-селектор, как:after применить разрыв строки сcontent?

Есть идеи по этому поводу? Какие-нибудь хитрые уловки, чтобы заставить это работать?