Chrome und Edge Floating mittleren Bild unter dem ersten und letzten, ist das korrekt?

Question

Es scheint, dass in Microsoft Edge und Google Chrome das Floating die divs nicht richtig anordnet, wenn Sie drei divs links schweben und die Seite in einer Breite zwischen 444 und 436 px skaliert wird, geht das dritte div an die Position des zweiten divs anstatt darunter zu gehen. Dieser "Fehler" tritt nicht in Firefox auf.

machte ich eine JSFiddle zu http://jsfiddle.net/e47jckrh/

HTML

<div id="d1"> 
    <p>1</p> 
</div> 
<div id="d2"> 
    <p>2</p> 
</div> 
<div id="d3"> 
    <p>3</p>  
</div> 

CSS

div{ 
    float: left; 
} 

Unten getestet werden eine visuelle Darstellung, wie es ist, sollte es

Voll verhalten Seitenlayout

Correct div Floating wenn Seitenbreite ist mehr als 444px

Wrong div floating Reihenfolge, wenn Seitenbreite zwischen 444 und 436px

Correct div schwimmend, wenn die Seitenbreite kleiner als 444px

Es ist mir etwas nicht in Ordnung da und dachte nur sein kann, aber ich nehme an, das firefox Verhalten der richtige zu sein.

Answer 1

ich Ihre Geige hier bearbeitet haben: http://jsfiddle.net/e47jckrh/5/

Sie nicht alle Elemente haben schweben, wie Sie in der Frage vorgeschlagen hatte. Also fügte ich float: left; zu div mit der Nummer 3 und setze alle 3 zu display: inline-block;. Und mit display: table; und display: table-cell; mit vertical-align: center; ist ein wirklich alten Weg, etwas vertikal auszurichten.

Diese drei Linien arbeiten für die meisten Dinge:

position: relative; 
top: 50%; 
transform: translateY(-50%); 

Answer 2

Das Verhalten wird durch Rand rechts verursacht.

Wenn div 2 die richtige Grenze erreicht hat, läuft es über. In diesem Fall kontrollieren Sie sein Limit per Rand rechts. ABER Rand rechts ist nur wirksam, wenn es ein nachfolgendes Element gibt (seine berechnete Basis auf einem nachfolgenden Element). In diesem Fall div 3.

Nachdem es in neue Zeile überläuft das Div 3 nimmt seinen Platz. Aber in diesem Fall hat Rand rechts keine Auswirkung, da es das letzte Element in diesem Fluss ist.

EDIT: Ich habe gerade festgestellt, Sie haben nicht alle Element schwebend, ich weiß nicht, ob das Ihre ursprüngliche Idee war. Wenn es war, werde ich diese Antwort nicht löschen.

Answer 3

Okay. Also #d3 sollte nicht auf der rechten Seite überhaupt sein, weil es nicht schwebt, aber Sie display:table verwendet. Dies hat den Effekt, aus irgendeinem Grund mit den anderen zwei Divs zu schweben.

Da display: table#d3 die Ränder sind von der Seite, aber zählen nicht als "nicht passend" und zwingen Sie es nicht auf die nächste Zeile.

#d2 ist floated obwohl seine Ränder beeinflussen es.In dem kleinen Bereich, den Sie erleben, wird #d1 + #d2 nicht passen, da ihre Ränder zu einer insgesamt größeren Breite beitragen, aber #d1 + #d3 wird, weil #d3 nicht von seinem Rand auf der rechten Seite betroffen ist, die Combo geben insgesamt kleinere Größe Breite.

Einfache Lösung ist #d3 auch zu schweben:

#d3 { 
    background-color: #ede4ad; 
    border: 3px dotted #6e5b3c; 
    clear: right; 
    float: left; 
}