Sejajarkan DIV-blok inline ke atas elemen kontainer

Ketika dua inline-block divs memiliki ketinggian yang berbeda, mengapa yang lebih pendek dari keduanya tidak sejajar dengan bagian atas wadah? ( 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>

Bagaimana saya bisa menyelaraskan yang kecil divdi bagian atas wadahnya?

Karena vertical-aligndiatur pada baseline sebagai default.

Gunakan vertical-align:topsebaliknya:

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

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

Atau seperti yang dikatakan @ f00644 , Anda dapat menerapkan floatelemen anak juga.

Anda perlu menambahkan vertical-alignproperti ke div dua anak Anda.

Jika .smallselalu lebih pendek, Anda hanya perlu menerapkan properti .small. Namun, jika salah bisa menjadi tertinggi maka Anda harus menerapkan properti untuk kedua .smalldan .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;   
}

Perataan vertikal memengaruhi inline atau kotak-sel kotak, dan ada sejumlah besar nilai yang berbeda untuk properti ini. Silakan lihat https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align untuk perincian lebih lanjut.

<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/>");

})

Tambahkan overflow: otomatis ke div kontainer. http://www.quirksmode.org/css/clearing.html Situs web ini menunjukkan beberapa opsi ketika mengalami masalah ini.