CSS: posizione verticale inaspettato di elementi "inline-block"

Si prega di considerare il seguente codice HTML:CSS: posizione verticale inaspettato di elementi "inline-block"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <title>test</title> 
    <style> 
     .section { 
      display: inline-block; 
      border: 1px dashed blue; 
     } 
     .outer { 
      border: 1px dashed red; 
      margin: 10px; 
     } 
    </style> 
</head> 
<body> 
    <div style="height: 500px; width: 200px;" class="section">a 
     <div style="height: 100px;" class="outer">1A<br />1B</div> 
    </div> 
    <div style="height: 500px; width: 200px;" class="section">b 
     <div style="height: 200px;" class="outer">2</div> 
     <div style="height: 200px;" class="outer">3<br />4<br />5</div> 
    </div> 
</body> 
</html>

Dal momento che entrambi i div con classe ".section" hanno la stessa altezza, e sono in linea blocchi, ho si aspetterebbe che fossero entrambi allineati verticalmente. Tuttavia, il primo di questi div viene spostato verso il basso, in modo che il testo "1B" sia allineato con la riga di testo "5" dell'altra sezione. L'aggiunta o la rimozione di linee in entrambi i div ha un impatto diretto sulla posizione verticale della mia prima sezione.

Non vedo la logica di questo, e non riesco a trovare la risposta nella documentazione ufficiale CSS3 sia. Tuttavia, non sembra essere un bug, in quanto è identico in Chrome 8, Safari 5, Opera 9.5 e Firefox 4 beta ... non ha provato IE, dal momento che non è comunque un riferimento.

Sto cercando una spiegazione razionale per questo fenomeno. Ovviamente ci sono diverse soluzioni alternative (ad esempio la modifica del blocco inline per la tabella inline risolve il problema, oppure potrei usare i normali blocchi mobili, ecc ...). Comunque sto cercando di comprendere questo comportamento.

Speriamo che ci sia qualcuno più saggio di me che può spiegare questo.

Esempio dal vivo here.

fonte

2011-01-28 Eric J. Francois

Perché combinano stile esterno e in linea? – Kyle

Per aiutare a testare questo, ho creato una [pagina JSFiddle] (http://jsfiddle.net/QfPKD/) usando il codice originale (leggermente modificato per usare meno stili in linea, ma lo stesso effetto). – Spudley

Ho fatto la stessa cosa: D Tranne non ha modificato gli stili in linea. – Kyle

Il valore predefinito per vertical-align in CSS è baseline. Ciò significa che la linea di base dell'ultimo testo nella prima sezione ("1B") è allineata con la linea di base dell'ultimo testo nella seconda sezione ("5") - e anche con la linea di base di qualsiasi testo circostante se tu avessi qualunque.

Se si aggiunge un vertical-align: bottom; esplicito allo .section CSS, allora verrà utilizzata la parte inferiore del blocco in linea come guida di allineamento, fornendo il risultato desiderato.

Vedi http://www.brunildo.org/test/inline-block.html per una dimostrazione di come vertical-align vale per inline blocchi

fonte

2011-01-28 12:20:13 Gareth

Infatti. Ero totalmente ignaro di allineare i lavori di allineamento verticale-allineati. Non avrei dovuto leggere la documentazione della proprietà display, ma della proprietà vertical-align. Molte grazie! –

Questo è sperabilmente ovvio per chiunque stia leggendo questo, ma verticale-align: top; funziona bene anche se hai il problema opposto dove le colonne successive sono "spinte verso il basso" –

CSS: posizione verticale inaspettato di elementi "inline-block"

risposta

Problemi correlati