Chrome e Edge immagine centrale mobile sotto prima e ultima, è corretta?

Question

Sembra che nel Microsoft edge e google chrome il floating non riorganizzi correttamente i div, se ci sono tre div flottanti a sinistra e la pagina è ridimensionata in una larghezza tra 444 e 436 px il terzo div va nella posizione del secondo div invece di andare sotto di esso. Questo "bug" non si verifica in Firefox.

Ho fatto una JSFiddle da testare 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; 
} 

In basso v'è una rappresentazione visiva di come dovrebbe comportarsi

completa layout di pagina

corretto div mobile quando larghezza della pagina è più di 444px

div errato ordine mobile quando larghezza della pagina è tra 444 e 436px

div corretta galleggiando quando larghezza della pagina è inferiore a 444px

potrebbe essere solo me pensando che ci sia qualcosa di sbagliato, ma suppongo che il comportamento di Firefox per essere quella corretta.

Answer 1

Ho modificato il vostro violino qui: http://jsfiddle.net/e47jckrh/5/

Non hai galleggiare tutti gli elementi come ci ha suggerito nella domanda. Così ho aggiunto float: left; al numero 3 div e impostato tutti i 3 a display: inline-block;. E usando display: table; e display: table-cell; con vertical-align: center; è davvero un vecchio stile per ottenere qualcosa da allineare verticalmente.

Questi 3 linee funzionano per la maggior parte delle cose:

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

Answer 2

Il comportamento è causato dal margine destro.

Quando div 2 raggiunge i suoi contenitori a destra limita l'overflow. In questo caso controlli il suo limite per margine-destra. MA margin-right è efficace solo se c'è un elemento successivo (la sua base calcolata su un elemento successivo). In questo caso div 3.

Dopo che fuoriesce in una nuova linea, il div 3 prende il suo posto. Ma in questo caso margin-right non ha alcun effetto dal momento che è l'ultimo elemento di questo flusso.

MODIFICA: Ho appena realizzato che non hai fluttuato tutti gli elementi, non so se è stata la tua idea iniziale. Se lo fosse, non cancellerò questa risposta.

Answer 3

OK. Quindi #d3 non dovrebbe essere sul lato destro perché non è mobile, ma hai utilizzato display:table. Questo gli dà l'effetto di fluttuare con gli altri due div per qualche motivo.

Poiché utilizza i valori display: table#d3 i margini sono fuori dalla pagina ma non vengono conteggiati come "non adatti" e non vengono forzati alla riga successiva.

#d2 è flottato, tuttavia i suoi margini lo influenzano.Quindi nella piccola gamma che stai riscontrando, questo #d1 + #d2 non si adatta a causa dei margini che contribuiscono a una larghezza di dimensioni più grandi ma #d1 + #d3 perché il margine #d3 non viene influenzato dal lato destro che fornisce alla combo un larghezza complessiva più piccola.

soluzione semplice è quella di galleggiare #d3 così:

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