22

我有一些非常简单的代码，非常适合我想要实现的外观。我有两个显示为“盒子”的 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>

图片

在此处输入图像描述

谢谢！

4

2 回答 2

61

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

于 2012-12-01T18:42:04.737 回答
13 

.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 属性。

它仅对inline和inline-block元素有效。

这是关于vertical-align的一个很好的参考。

于 2012-12-01T18:42:23.427 回答