2014-04-06 31 views
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'>&#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對齊仍然在底部的這隻發生。

+0

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

+0

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

+0

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

回答

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

add vertical-align:top;

相關問題