Ich arbeite an einem reaktionsschnellen Webdesign, bei dem mehrere Elemente in 4 Spalten nebeneinander angezeigt werden. Diese Gegenstände haben unterschiedliche Höhen und daher funktioniert das Schweben nicht richtig.

Das passiert im Moment:

falsch schweben http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

Ideen, wie man die Elemente so schweben lässt:

Floating Right http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

Ich denke, das sollte mit jQuery "Mauerwerk" funktionieren, oder? Allerdings arbeite ich mit Zepto.js und ich denke, ein jQuery-Plugin würde nicht funktionieren.

Gibt es einen reinen CSS (CSS3) Weg dazu? Irgendein Trick oder so?

Wenn dies nicht mit reinem CSS oder mit JS funktionieren würde, ist dies möglich:

floating different http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

Jetzt schwebt die zweite Zeile mit den Elementen 5, 6 und 7 nicht "wirklich" so, wie Sie es erwarten würden, aber es gibt einen versteckten Zeilenumbruch (Clearfix) im Inneren.

Geht das überhaupt mit reinem CSS? Z.B. benutzennth-child(4n+4) und ein Pseudo-Selektor wie:after mit einem Zeilenumbruch versehencontent?

Irgendwelche Ideen dazu? Irgendwelche cleveren Tricks, um das zum Laufen zu bringen?