为什么内联块div在它有内容时定位得更低？ [英] Why does an inline-block div get positioned lower when it has content?

问题描述

如果您有三个相同的div位于inline-block，它们完全对齐。但是，如果你把任何内容在任何div，它下降到其他人。为什么要这样做？

If you have three identical divs positioned inline-block they are aligned perfectly. But if you put any content in any of the divs it drops down below the others. Why does it do that?

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

推荐答案

这是因为vertical-align默认设置为baseline。
您可以通过将其设置为顶部来解决您的问题：

This is because vertical-align is by default set to baseline. You can fix your problem by setting it to top :

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

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

这篇关于为什么内联块div在它有内容时定位得更低？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！