Wenn drei Elemente nach rechts geflattert sind, warum Element folgt (siehe jsfiddle), ist Element 1 das erste Element auf der rechten Seite, wenn Element 3 tatsächlich das letzte Element ist.
Bestellung ist jetzt
[3] [2] [1]
Aber Elemente sind in dieser Reihenfolge in HTML
[1] [2] [3]
Warum?
Antworten:
Diese "umgekehrte Reihenfolge" ist das beabsichtigte Ergebnis.
Sie können in der CSS-Spezifikation herumgraben wenn Sie möchten, aber Ihr Beispiel wird so gerendert, wie es sollte.
Wenn Sie möchten, dass sie in derselben Reihenfolge wie das Markup angezeigt werden, schweben Sie die .container rechts und links.
Das erste Element bewegt sich nach rechts, stoppt, wenn es den Rand des Containers berührt, und ermöglicht es dem nächsten Element, sich nach links zu bewegen.
Das zweite Element macht dann dasselbe, außer dass es stoppt, wenn es den linken Rand des ersten Elements trifft.
… und so weiter.
floatDie Eigenschaft beginnt ihre Analyse von ganz rechts nach ganz links.
Ex:
<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>
mit dieser Regel:
.block {
float: left;
}
block-3wird nach links ausgerichtet, wir haben: block-3, block-1, block-2
block-2wird nach links ausgerichtet, wir haben: block-2, block-3, block-1
block-1wird nach links ausgerichtet, wir haben:block-1, block-2, block-3
mit dieser Regel:
.block {
float: right;
}
block-3wird nach rechts ausgerichtet, wir haben: block-1, block-2, block-3
block-2wird nach rechts ausgerichtet, wir haben: block-1, block-3, block-2
block-1wird nach rechts ausgerichtet, wir haben:block-3, block-2, block-1
Wenn Sie sie float:rightin der richtigen Reihenfolge haben möchten, block-1, block-2, block-3
sollten Sie sie im Markup austauschen
<div class="block block-3"></div>
<div class="block block-2"></div>
<div class="block block-1"></div>
UPDATE: Oder wickeln Sie sie alle in ein übergeordnetes Element ein und schweben Sie nur übergeordnetes Element
Die Verwendung von float oder einer anderen CSS-Eigenschaft hat keine Auswirkungen auf den HTML-Quellcode.
Jedes Element, das dem schwebenden Element folgt, fließt um das schwebende Element auf der anderen Seite.
Wenn Sie ein Bild nach links verschieben, wird der Text oder andere darauf folgende Elemente nach rechts um das Bild herum fließen. Wenn Sie ein Bild nach rechts schweben lassen, wird der Text oder andere darauf folgende Elemente nach links um das Bild herum fließen.
Dies liegt daran, dass Sie in Ihrem HTML festgelegt haben, dass [Element 1] zuerst rechts ausgerichtet angezeigt wird. Daher ist dies genau das, was der Browser rendert. Wenn Sie in Ihrem HTML-Code [Element 2] anzeigen, das nach rechts verschoben ist, führt der Browser dies aus, ABER nachdem [Element 1] die Priorität hat, rechts angezeigt zu werden, da [Element 1] in Ihrem HTML-Code an erster Stelle stand.
Hoffe das macht Sinn.
Wenn beide Elemente so eingestellt sind, dass sie in dieselbe Richtung schweben (in diesem Fall rechts), ist das erste Element, das in unserem HTML-Code angezeigt wird (nicht CSS!), Dasjenige auf der anderen Seite nahe der Kante.