请考虑以下 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，因为它无论如何都不是参考。
我正在寻找这种现象的合理解释。当然有几种解决方法（例如，将 inline-block 更改为 inline-table 可以解决问题，或者我可以使用普通的浮动块等...）。不过我正在尝试理解这种行为。
希望有比我更聪明的人可以解释这一点。
实例here http://jsfiddle.net/Kyle_Sevenoaks/RUerA/.
默认值为vertical-align在 CSS 中是baseline。这意味着第一部分中最后一个文本的基线（“1B”）与第二部分中最后一个文本的基线（“5”）对齐 - 如果您有的话，也与任何周围文本的基线对齐任何。
如果您添加显式vertical-align: bottom;给你的.sectionCSS 然后将使用内联块的底部作为对齐指南，给出您想要的结果。
See http://www.brunildo.org/test/inline-block.html http://www.brunildo.org/test/inline-block.html演示如何vertical-align适用于内联块
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
