CSS Bildergalerie Float BUG

Question

Das ist neu, ich habe Probleme mit einer Seite Archiv ich gemacht habe. Es scheint wie eine recht geradlinig div Bildgalerie schwebte ... aber aus irgendeinem Grunde die es gibt eine Reihe von Zeilenumbrüchen zufällig über den divs. Ich dachte, es ist ein Problem mit Cufon oder IE.JS etc gewesen sein, aber ich alle JS deaktiviert und es immer noch Fehler aus.

Es scheint ein bisschen zu lang hier den Code zu schreiben, und ich habe eine Reihe von unnötigen divs und klare Korrekturen geworfen, aber nichts scheint zu funktionieren. Ich werde einen richtigen Bericht veröffentlichen und organisieren, nachdem ich es gedacht habe aus.

Answer 1

Da einige Titel länger als andere sind, einiger Zeilenumbruch und damit die div größer machen. Die Schwimmer werden dann „hängen auf“ diese größer divs. Es ist kein Fehler per se, es ist nur, wie Floating funktioniert.

 --- --- ---
 |1| |2| |3|
 --- | | ---
     --- ---
         |4|
         ---
 ---
 |5|
 ---

Der beste Weg, um dieses Problem zu vermeiden, ist jeder div eine eingestellte Höhe zu geben.

Alternativ können Sie das erste div jeder Zeile haben „clear: left“ zu jedem ersten / her / siebente eine entsprechende Klasse durch Hinzufügen / etc div

.

EDIT: Um zu erarbeiten, wie dies schwebt: Jedes div versucht auf der gleichen Linie wie die vorherige div, schwimmend so weit links wie möglich zu passen. Wenn es kein Platz auf der Linie nach links ist, wird es zuerst nach unten gedrückt wird, dann links. In dem obigen Beispiel wird 4 um 3 geschoben werden, dann wird es so weit wie möglich float links, schlägt 2. 5 wird von 4, dann schwimmt links so weit wie möglich nach unten gedrückt wird.