Bagaimana cara menyelaraskan div ke bagian atas induknya tetapi tetap mempertahankan perilaku inline-block-nya?

Lihat: http://jsfiddle.net/b2BpB/1/

T: Bagaimana Anda bisa membuat box1 dan box3 sejajar dengan bagian atas div induk boxContainer?

#boxContainerContainer {
  background: #fdd;
  text-align: center;
}

#boxContainer {
  display: inline-block;
  border: thick dotted #060;
  margin: 0px auto 10px auto;
  text-align: left;
}

#box1 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

#box2 {
  width: 50px;
  height: 100px;
  background: #999;
  display: inline-block;
}

#box3 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

Membantu banyak dihargai ...

Pengakuan: Pertanyaan ini diambil dari jawaban yang sebelumnya diberikan oleh https://stackoverflow.com/users/20578/paul-d-waite : Mendapatkan elemen CSS untuk secara otomatis mengubah ukuran ke lebar konten, dan pada saat yang sama dipusatkan

Coba vertical-alignproperti CSS.

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

Terapkan juga untuk itu #box3.

Seperti yang orang lain katakan, vertical-align: topadalah temanmu.

Sebagai bonus di sini adalah biola bercabang dua dengan peningkatan tambahan yang membuatnya bekerja di Internet Explorer 6 dan Internet Explorer 7 juga;)

Contoh: di sini

Gunakan perataan vertikal: atas; untuk elemen yang Anda inginkan di atas, seperti yang telah saya tunjukkan pada jsfiddle Anda.

http://www.brunildo.org/test/inline-block.html

Anda dapat menambahkan float: left; untuk masing-masing kotak (box1, box2, box3).

http://jsfiddle.net/Wa4ma/

Atau Anda bisa menambahkan beberapa konten ke div dan menggunakan inline-table