Hộp Div không căn chỉnh đúng cách bằng cách sử dụng inline-block

Question

Tôi có một số mã rất đơn giản hoạt động hoàn hảo cho những gì tôi đang cố gắng đạt được. Tôi có hai divs được hiển thị như là "hộp" được chứa trong một div bên ngoài đó là boxContainer. Tôi có những chiếc hộp ngồi cạnh nhau hơn là một cái trên đầu kia, và chúng được sắp xếp hoàn hảo ở giữa màn hình. Chiều rộng của hộp co lại/tăng lên khi chiều rộng của trình duyệt nhỏ hơn/lớn hơn và các hộp chuyển vị trí thành một đầu khác nếu cửa sổ trình duyệt quá nhỏ, trong khi vẫn căn giữa trên trang. Hoàn hảo.

Vấn đề duy nhất là các hộp được căn chỉnh ở dưới cùng thay vì trên cùng. Bởi vì hộp thứ hai có ít văn bản bên trong nó, nó được đẩy xuống phía dưới trang để căn chỉnh với đáy của hộp đầu tiên. Thay vào đó, tôi muốn họ căn chỉnh trên đầu.

Tôi tin rằng điều này là do hiển thị: inline-block, nhưng tôi không chắc chắn lý do tại sao và tôi không biết cách khắc phục và giữ các tính năng tương tự mà tôi đã liệt kê ở trên.

Nếu bạn có thể giúp tôi, tôi chắc chắn sẽ đánh giá cao nó !!

#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>

Hình

Cảm ơn bạn!

Answer 1

Vì các hộp đã là inline-block, bạn có thể thêm vertical-align: top vào kiểu .box.

Answer 2

Bạn nên thêm vertical-align:top; vào lớp .box.

.box { 
    vertical-align:top; 
}​ 

Nhìn vào tôi DEMO.