Jajarkan DIV blok sebaris di atas elemen bekas

Question

Apabila dua inline-block's div mempunyai ketinggian yang berbeza, mengapa yang lebih pendek tidak sejajar dengan bahagian atas bekas? (DEMO):

.container {
    sempadan: 1px hitam pepejal;
    lebar: 320px;
    ketinggian: 120px;
}

.kecil {
    paparan: inline-block;
    lebar: 40%;
    ketinggian: 30%;
    sempadan: 1px hitam pepejal;
    latar belakang: aliceblue;
}

.besar {
    paparan: inline-block;
    sempadan: 1px hitam pepejal;
    lebar: 40%;
    ketinggian: 50%;
    latar belakang: kuning air;
}

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

Bagaimanakah saya menjajarkan div ke bahagian atas bekasnya?

Answer 1

Anda perlu menambah vertical-align atribut pada kedua-dua div kanak-kanak.

Jika.small始终较短，则只需将该属性应用于.small. Walau bagaimanapun, jika mana-mana daripada mereka mungkin yang tertinggi, maka atribut itu harus digunakan untuk .small和.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;   
}

Penjajaran menegak mempengaruhi kotak sel sebaris atau meja, sifat ini mempunyai banyak nilai yang berbeza. Sila lihat https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align untuk butiran lanjut.

Answer 2

Kerana secara lalai, vertical-align ditetapkan kepada garis dasar.

Gunakan vertical-align:top sebaliknya:

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

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

Atau seperti yang @f00644 katakan, anda juga boleh memohon float pada elemen kanak-kanak.