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-align CSS屬性。

它僅對內 聯塊和內聯塊元素有效。

這是vertical-align的一個很好的參考。