elemento inline-block annidato in un altro elemento inline-block ha un offsetTop

Question

io sono nuovo HTML apprendimento e ora ho un po 'di codice come

<div id="container" style="height:300px;width:500px;font-size:0"> 
    <div id="leftBox" style="display: inline-block; background: pink; width: 50%; height: 100%;"> 
     <div id="wrapper" style="height:10%;"> 
      <div style="display: inline-block; background: red; width: 50%; height: 100%;"></div> 
      <div style="display: inline-block; background: blue; width: 50%; height: 100%;"></div> 
     </div> 
    </div> 
    <div id="rightBox" style="display: inline-block; background: green; width: 50%; height: 100%;"></div> 
</div> 

(E ho postato su http://jsfiddle.net/Simon_Chan/Z3WyA/)

È può vedere il leftBox ha un grande offsetTop, ma se non c'è wrapperowrapper s' altezza è di 100% o non c'è rightBoxo non v'è alcun elemen ts in wrapper, in tutte queste condizioni leftBox non ha offsetTop.

Perché farlo? E come rimuoverlo?

Grazie!

Answer 1

Per risolvere il problema è necessario aggiungere vertical-align:top a #leftBoxo#rightBox

La ragione è che il valore di default vertical-align è baseline che

Allinea la linea di base della scatola con la linea di base la casella genitore

La linea di base della casella genitore è la parte inferiore di la scatola.

Baseline è definito come

la linea su cui la maggior parte delle lettere "sedersi" e sotto il quale discendenti estendono

Tutti i casi si descrive nel risultato domanda nel linea di base venga alterato che allinea gli elementi come desiderato.

Un buon esempio della linea di base è il seguente codice in cui non sono presenti elementi nel wrapper <div> ma testo di dimensione carattere molto grande. Si può vedere come il fondo della verde<div> è allineato al base del genitore (il bordo punteggiato rosso <div>) e come il rosa<div> s testo fa muovere al punto in cui il testo è seduto sul genitore baseline.

<div style="height:300px;width:500px;font-size:0;border:1px dotted red"> 
    <div style="display: inline-block; background: pink; width: 50%; height: 100%;"> 
     <div style="height:100%;font-size:150px">foo</div> 
    </div> 
    <div style="display: inline-block; background: green; width: 50%; height: 100%;"></div> 
</div> 

Answer 2

Lo fa a causa del modo in cui le varie scatole si trovano sulla linea di base. Il modo più semplice per rimuovere il problema è allineare verticalmente in modo diverso. per esempio. utilizzare div {vertical-align:top }

Per vedere come le caselle di blocco in linea si trovano sulla linea di base per impostazione predefinita, vedere http://jsfiddle.net/veCEf/. Si noti in particolare come le caselle di divisione inline-block prive di contenuto abbiano il fondo della loro casella che si trova sulla linea di base, mentre una volta che hanno contenuto, il fondo del loro contenuto si trova sulla linea di base.