Div盒子不能正確對齊使用內聯塊

我有一些非常簡單的代碼，它適合我想要實現的外觀。我有兩個div，顯示爲「box」，它們包含在boxContainer的外部div中。我把盒子放在一起，而不是一個放在另一個的上面，它們在屏幕中間完美對齊。當瀏覽器寬度變得越來越小時，方框寬度會縮小/增大，如果瀏覽器窗口太小而又保持居中在頁面上，方框會重新定位。完善。Div盒子不能正確對齊使用內聯塊

唯一的問題是盒子在底部而不是頂部對齊。由於第二個文本框中的文本較少，因此它會進一步向下推動以與第一個框的底部對齊。我想讓他們在頂部對齊。

我相信這是由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>

圖片

enter image description here

謝謝！

來源

2012-12-01 Joey

由於箱子已經是inline-block，所以您可以將vertical-align: top添加到.box風格。

來源

2012-12-01 18:42:04 FoolishSeth

+1因爲你真的很快 – Bruno

哦哇，這非常簡單。我花了幾個小時試圖讓它工作！謝謝！ – Joey

Upvote解決我的問題這麼快:) – Si8

您應該將vertical-align:top;添加到.box類。

.box { 
    vertical-align:top; 
}

看看我DEMO。

來源

2012-12-01 18:42:23 Bruno

Div盒子不能正確對齊使用內聯塊

回答

相關問題