css – 为什么内联块div在有内容时会降低位置?

前端之家收集整理的这篇文章主要介绍了css – 为什么内联块div在有内容时会降低位置?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Why does this inline-block element have content that is not vertically aligned4个
如果你有三个相同的div位于内联块,它们完全对齐.但是如果你在任何一个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/

解决方法

这是因为vertical-align默认设置为baseline.
您可以通过将问题设置为顶部来解决问题:
div {
    display:inline-block;
    margin-:2px;
    height:100px;
    width:25px;
    border:1px solid black;
    vertical-align: top;
}​

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

原文链接:https://www.f2er.com/css/216215.html

猜你在找的CSS相关文章