html - 为什么较大的文本会将内容推向左下方？

所以我制作了四个简单的 div，我将更改标题 div 的属性。

HTML:

   <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        <div class="header">Lorem Ipsum</div>
    </div>

CSS:

.third {
    width:500px;
    display:inline-block;
    border-right:1px solid black;
    height:400px;
}
.header {
    margin-left:16%;
    font-family:Arial;
    font-size:200%;
}

第三个 div 效果很好，但前两个 div 由于文本较大而被下推。我能做些什么来防止这个问题？

最佳答案

添加 vertical-align: top 将解决您的问题。

fiddle :http://jsfiddle.net/QX7FH/

如果您好奇为什么会这样，andyb 在这里很好地解释了原因:Why does this inline-block element have content that is not vertically aligned

关于html - 为什么较大的文本会将内容推向左下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22667498/