html - 使用内联 block 未正确对齐的 Div 框

Question

我有一些非常简单的代码，非常适合我想要实现的外观。我有两个显示为“框”的 div，它们包含在一个外部 div(即 boxContainer)中。我让盒子并排放置，而不是一个放在另一个上面，并且它们在屏幕中间完美对齐。框的宽度随着浏览器宽度变小/变大而缩小/增大，如果浏览器窗口太小，框会重新定位为一个位于另一个之上，同时保持在页面的中心。完美。

唯一的问题是盒子在底部而不是顶部对齐。由于第二个框内的文本较少，因此将其向下推到页面下方以与第一个框的底部对齐。我希望它们在顶部对齐。

我相信这是由 display:inline-block 引起的，但我不确定原因，也不知道如何修复它并保持上面列出的相同功能。

如果你能帮助我，我将不胜感激!!

#boxContainer {
    width:80%;
    margin:0 auto;
    text-align:center;
}
.box {
    display:inline-block;
    width:35%;
    margin:20px;
    border:solid 5px;
    border-radius:40px;
}

<div id="boxContainer">
    <div class="box">
        <h3>BOX 1</h3>
        <p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
    </div>

    <div class="box">
        <h3>BOX 2</h3>
        <p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
    </div>
</div>

图片

谢谢!

Answer 1

由于盒子已经是 inline-block，您可以将 vertical-align: top 添加到 .box 样式。