絕對定位的父內嵌入塊元素的奇怪行爲

我有幾個<div>有display:inline-block，位於一個absolute位於父母<div>。絕對定位的父內嵌入塊元素的奇怪行爲

HTML

<div id='wrap'> 
    <div id='container'> 
    <div class='box'></div> 
    <div class='box'></div> 
    <div class='box'>&#64;</div> 
    <div class='box'></div> 
    </div> 
</div>

CSS

*{ 
margin:0; 
} 
html, body{ 
height:100%; 
} 
#wrap{ 
position:relative; 
background:lightgreen; 
height:100%; 
} 
#container{ 
position:absolute; 
bottom:0px; 
vertical-align:baseline; 
} 
.box{ 
display:inline-block; 
width:80px; 
height:120px; 
background:white; 
border:1px solid; 
}

當我在任何<div> S的添加一些ASCII字符代碼，奇怪的其他<div>的舉動了。如果我刪除ascii字符，則所有<div> s在同一行中完美對齊。

檢查這個JSFiddle

我知道其他方式使這一佈局，我可以做的箱子絕對和強制它們定位在父母的底部，我知道CSS3 flex的。

但我對這個具體問題感興趣，有人可以解釋爲什麼會發生這種情況..？或者我該如何修復它？

更新

我不感興趣，修復它，因爲有很多方法可以實現相同的對齊。我只想了解發生了什麼。問題是，divs默認情況下是在底部對齊。爲什麼當其中一個div在其中具有角色時，其他divs突然在頂部對齊？ Updated Fiddle with both scenarios

邊注：當我添加文本的元素裏面，如果我添加一個HTML元素，而不是一個字符的所有div對齊仍然在底部的這隻發生。

來源

2014-04-06 T J

所有奇怪的事情是所謂的**垂直對齊**，它僅適用於**內聯**元素（包括內嵌塊），空'div'沒有任何內容供我們使用要知道** baseline **應該在哪裏，但看起來像是在'div'塊的最底部設計的，這個基線位置將穿過當前內聯中所有其他元素的基線流量，因此你會看到結果。爲了解決這個問題，只需簡單地爲所有'divs'設置'vertical-align' **或者使用'：empty'選擇器來篩選空白div –

爲什麼空白div沒有基線甚至如果它的「高度」被明確設置...？真正的問題是爲什麼其中一個div獲得基線時，其他div突然在頂部對齊？ –

「高度」與基線無關，事實上，「線高」是應該影響基線的因素，但它僅在容器包含某物時才起作用。當它爲空時，看起來像默認基線是底部邊緣/邊界。爲什麼這樣？我相信**這只是一個設計的功能**。你只需要知道它的行爲，並相應地調整你的CSS，使其工作... –

.box{ 
display:inline-block; 
width:80px; 
height:120px; 
background:white; 
border:1px solid; 
vertical-align: top; 
}

add vertical-align：top;

來源

2014-09-23 07:04:53 Teranko

絕對定位的父內嵌入塊元素的奇怪行爲

回答

相關問題