CSS Float links, rechts, links, rechts ... und alle nach oben

Question

Schrecklichen Titel dieser Frage, ich weiß. Es tut uns leid.

Ich habe vier divs similar to this. Was ich tun möchte, ist einfach, den vertikalen Abstand zwischen div Nummer 2 und 4 zu entfernen, und ohne die Struktur des HTML zu ändern. Ist es möglich, nur mit CSS zu arbeiten (natürlich ohne negative Margen oder andere nicht generische Lösungen)? Und ich möchte auch, dass die div 1 und 3 ohne den vertikalen Abstand im Fall eines längeren div 2 als 1 sein.

Das gewünschte Ergebnis würde grafisch aussehen something like this.

Danke.

Answer 1

Na ja, nicht mit schwimmt gerade. Das wäre absolute Positionierung, oder ändern Sie die Struktur des HTML, so dass Sie div Nummer # 2 und # 3 Hase rechts schweben, und dann eine Float links auf div # 4.

Absolute Positionierung und negative Ränder ist eine andere Option, nicht sehr dynamisch, aber es funktioniert.

Die beste Option wäre, ein wenig jQuery zu verwenden, um Ihr Problem zu lösen. Auschecken: http://masonry.desandro.com/

Answer 2

auf den Code des 4. div hinzufügen

position:relative; 
top:-100px; 

Look für die Klasse zum 4. div hinzugefügt

http://jsfiddle.net/eZGTm/1/