CSS：的「inline-block的」元素意想不到的垂直位置

請考慮下面的HTML代碼：CSS：的「inline-block的」元素意想不到的垂直位置

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <title>test</title> 
    <style> 
     .section { 
      display: inline-block; 
      border: 1px dashed blue; 
     } 
     .outer { 
      border: 1px dashed red; 
      margin: 10px; 
     } 
    </style> 
</head> 
<body> 
    <div style="height: 500px; width: 200px;" class="section">a 
     <div style="height: 100px;" class="outer">1A<br />1B</div> 
    </div> 
    <div style="height: 500px; width: 200px;" class="section">b 
     <div style="height: 200px;" class="outer">2</div> 
     <div style="height: 200px;" class="outer">3<br />4<br />5</div> 
    </div> 
</body> 
</html>

因爲帶班兩個div的「.section僞」是相同的高度，是內聯塊，我會期望它們都是垂直對齊的。但是，這些div的第一個被壓下，所以文本「1B」與另一部分的文本行「5」對齊。添加或刪除div中的行對我的第一部分的垂直位置有直接影響。

我沒有看到這個邏輯，我也找不到正式的CSS3文檔中的答案。然而，它似乎並不是一個bug，因爲它在Chrome 8，Safari 5，Opera 9.5和Firefox 4 beta中都是一樣的......沒有嘗試過IE，因爲它不是一個參考。

我正在尋找這種現象的理性解釋。當然，有幾種解決方法（例如，將內嵌塊更改爲內聯表可修復問題，或者我可以使用普通的浮動塊等）。不過，我試圖理解這種行爲。

希望有人比我更聰明誰能解釋這一點。

現場示例here。

來源

2011-01-28 Eric J. Francois

你爲什麼混合外部和內聯樣式的演示見http://www.brunildo.org/test/inline-block.html？ – Kyle 2011-01-28 12:05:12

爲了幫助測試這個，我創建了一個[JSFiddle頁面]（http://jsfiddle.net/QfPKD/），使用原始代碼（稍作修改以使用較少的內嵌樣式，但效果相同）。 – Spudley 2011-01-28 12:08:55

CSS中vertical-align的默認值爲baseline。這意味着第一部分（「1B」）中最後一個文本的基線與第二部分中最後一個文本的基線（「5」）排列在一起 - 並且如果您有任何周圍文本的基線任何。

如果您將一個明確的vertical-align: bottom;添加到您的.section CSS中，那麼將使用內嵌塊的底部作爲對齊嚮導，以提供您需要的結果。

有關如何vertical-align應用於內聯塊

來源

2011-01-28 12:20:13 Gareth

CSS：的「inline-block的」元素意想不到的垂直位置

回答

相關問題