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样式中.

Answer 2

.box {
  display: inline-block;
  border: solid 1px;
  vertical-align: top;
  width: 40%;
}

<div id="boxContainer">
  <div class="box">
    <h3>BOX 1</h3>
    <p>Lorem ipsum dolor sit amet, altera interesset pri an. Et aeque interpretaris vel, at quo summo deleniti disputationi. Eu inimicus splendide duo, soleat intellegam ut per. Sint impedit recusabo ex vix, aliquid adipisci consequat no ius. Eu possim consequat eum, sea cu quaeque impedit, est fuisset accusamus definiebas ad.</p>
  </div>

  <div class="box">
    <h3>BOX 2</h3>
    <p>Viris eruditi consectetuer ei mea, eu nulla ridens officiis duo. In atomorum forensibus abhorreant quo, id nec aperiam dissentiet.</p>
  </div>
</div>

您可以使用vertical-alignCSS属性.

它仅对内联块和内联块元素有效.

这是vertical-align的一个很好的参考.