请考虑以下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,因为它无论如何都不是参考.
我正在寻找这种现象的合理解释.当然有几种解决方法(例如,将内联块更改为内联表可以解决问题,或者我可以使用普通的浮动块等等).但是我试图理解这种行为.
希望有一个比我更聪明的人可以解释这一点.
这里有实例.
Gar*_*eth 66
vertical-alignCSS中的默认值是baseline.这意味着第一部分("1B")中最后一个文本的基线与第二部分("5")中最后一个文本的基线对齐 - 如果有的话,还有任何周围文本的基线任何.
如果您vertical-align: bottom;向.sectionCSS 添加一个显式,那么将使用内联块的底部作为对齐指南,给出您想要的结果.
有关如何应用于内联块的演示,请参见http://www.brunildo.org/test/inline-block.htmlvertical-align
| 归档时间： |
|
| 查看次数： |
12981 次 |
| 最近记录： |