Question

请考虑以下HTML代码：

<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>

由于两个带有“.section”类的div都是相同的高度，并且是内联块，我希望它们都是垂直对齐的。但是，这些div中的第一个被按下，因此文本“1B”与另一部分的文本行“5”对齐。在div中添加或删除行会直接影响我第一部分的垂直位置。

我没有看到这个的逻辑，我也找不到官方CSS3文档中的答案。然而，它似乎并不是一个错误，因为它在Chrome 8，Safari 5，Opera 9.5和Firefox 4 beta中都是相同的...没有尝试IE，因为它无论如何都不是参考。

我正在寻找这种现象的合理解释。当然有几种解决方法（例如，将内联块更改为内联表可以解决问题，或者我可以使用普通的浮动块等等）。但是我试图理解这种行为。

希望有一个比我更聪明的人可以解释这一点。

直播示例here。

Answer 1

CSS中vertical-align的默认值为baseline。这意味着第一部分（“1B”）中最后一个文本的基线与第二部分（“5”）中最后一个文本的基线对齐 - 如果有的话，还有任何周围文本的基线任何

如果您向vertical-align: bottom; CSS添加一个明确的.section，那么它将使用内联块的底部作为对齐指南，从而得到您想要的结果。

有关vertical-align如何应用于内联块

的演示，请参见http://www.brunildo.org/test/inline-block.html

CSS：“内联块”元素的意外垂直位置

1 个答案: