inline-block Element zagnieżdżony w innym elemencie inline-block ma offsetTop

Question

Jestem nowy HTML uczenia się i teraz mam trochę kodu podobnego

<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> 

(I napisali go na http://jsfiddle.net/Simon_Chan/Z3WyA/)

You można zobaczyć leftBox ma duży offsetTop, ale jeśli nie ma wrapperlubwrapper „s wysokość wynosi 100% lub nie ma rightBoxlub nie ma elemen ts w wrapper, we wszystkich tych warunkach leftBox nie ma przesunięcia.

Dlaczego? I jak go usunąć?

Dzięki!

Answer 1

Aby rozwiązać ten problem, trzeba dodać vertical-align:top do #leftBoxlub#rightBox

Powodem jest to, że wartość domyślna vertical-align jest baseline który

Wyrównuje linię bazową polu z linii bazowej okienko nadrzędne

Linia bazowa pudełka nadrzędnego to dno pudełko.

Baseline jest zdefiniowany jako

linijka po którym większość litery „siad” i poniżej której zjazdowe rozciągają

wszystkich przypadkach można opisać w wyniku zapytania w wyjściowym zmiané który wyrównuje elementy zgodnie z potrzebami.

Dobrym przykładem bazowym jest następujący kod, w którym nie ma żadnych elementów w swojej owijki <div> ale bardzo duży tekst font-size zamiast. Można zobaczyć, jak dno zielonej<div> jest wyrównany do bazowym rodzica (czerwona przerywana granicznego <div>) i jak różowy<div> s tekst czyni go przenieść do miejsca, gdzie tekst jest siedzi na rodzica linia podstawowa.

<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

Czyni to ze względu na sposób, w jaki różne pudełka znajdują się na linii bazowej. Najprostszym sposobem na usunięcie problemu jest ich wyrównanie w pionie w różny sposób. na przykład użyj div {vertical-align:top }

Aby zobaczyć, w jaki sposób domyślnie ustawione są pola śródliniowe na linii bazowej, zobacz http://jsfiddle.net/veCEf/. Zwróć szczególnie uwagę na to, że pola typu div bez bloków nie mają dolnej części ramki, która znajduje się na linii bazowej, a gdy mają treść, jej zawartość znajduje się na linii bazowej.