为什么内联块div在它有内容时定位得更低? [英] Why does an inline-block div get positioned lower when it has content?
本文介绍了为什么内联块div在它有内容时定位得更低?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果您有三个相同的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/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屋!
查看全文