Căn chỉnh DIV khối nội tuyến vào đầu phần tử container

Khi hai inline-block divs có chiều cao khác nhau, tại sao hai cái ngắn hơn không thẳng hàng với đỉnh của container? ( DEMO ):

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

Làm thế nào tôi có thể sắp xếp nhỏ divở đầu container của nó?

Bởi vì vertical-alignđược đặt ở đường cơ sở như mặc định.

Sử dụng vertical-align:topthay thế:

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

Hoặc như @ f00644 cho biết bạn cũng có thể áp dụng floatcho các phần tử con.

Bạn cần thêm một vertical-aligntài sản cho hai div con của bạn.

Nếu .smallluôn luôn ngắn hơn, bạn chỉ cần áp dụng tài sản cho .small. Tuy nhiên, nếu một trong hai có thể cao nhất thì bạn nên áp dụng tài sản cho cả hai .smallvà .big.

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

Căn chỉnh dọc ảnh hưởng đến hộp nội tuyến hoặc ô bảng và có một số lượng lớn các giá trị khác nhau cho thuộc tính này. Vui lòng xem https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align để biết thêm chi tiết.

<style type="text/css">
        div {
  text-align: center;
         }

         .img1{
            width: 150px;
            height: 150px;
            border-radius: 50%;
         }

         span{
            display: block;
         }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
  <span class='dif'></span>
  <br>
  <button>ADD</button>
</div>

<script type="text/javascript">

$('button').click(function() {
  $('.dif').html("<img/>");

})

Thêm tràn: tự động vào div container. http://www.quirksmode.org/css/clear.html Trang web này hiển thị một vài tùy chọn khi gặp sự cố này.