css - 为什么内联块 div 有内容时的位置较低？

Question

如果您将三个相同的 div 定位在 inline-block 中，它们将完美对齐。但是，如果您将任何内容放在任何 div 中，它就会下降到其他 div 之下。为什么这样做？

<div class="left">?</div>
<div class="center"></div>
<div class="right"></div>

div {
    display:inline-block;
    margin-:2px;
    height:100px;
    width:25px;
    border:1px solid black;
}​

http://jsfiddle.net/7kkC6/

更好的例子：http: //jsfiddle.net/7kkC6/9/

Answer 1

这是因为垂直对齐默认设置为基线。您可以通过将其设置为 top 来解决您的问题：

div {
    display:inline-block;
    margin-:2px;
    height:100px;
    width:25px;
    border:1px solid black;
    vertical-align: top;
}​

这里的演示：http: //jsfiddle.net/7kkC6/4/