1
我有幾個<div>
有display:inline-block
,位於一個absolute
位於父母<div>
。絕對定位的父內嵌入塊元素的奇怪行爲
HTML
<div id='wrap'>
<div id='container'>
<div class='box'></div>
<div class='box'></div>
<div class='box'>@</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對齊仍然在底部的這隻發生。
所有奇怪的事情是所謂的**垂直對齊**,它僅適用於**內聯**元素(包括內嵌塊),空'div'沒有任何內容供我們使用要知道** baseline **應該在哪裏,但看起來像是在'div'塊的最底部設計的,這個基線位置將穿過當前內聯中所有其他元素的基線流量,因此你會看到結果。爲了解決這個問題,只需簡單地爲所有'divs'設置'vertical-align' **或者使用':empty'選擇器來篩選空白div –
爲什麼空白div沒有基線甚至如果它的「高度」被明確設置...? 真正的問題是爲什麼其中一個div獲得基線時,其他div突然在頂部對齊? –
「高度」與基線無關,事實上,「線高」是應該影響基線的因素,但它僅在容器包含某物時才起作用。當它爲空時,看起來像默認基線是底部邊緣/邊界。爲什麼這樣?我相信**這只是一個設計的功能**。你只需要知道它的行爲,並相應地調整你的CSS,使其工作... –