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的”元素意想不到的垂直位置

回答

相关问题