Div değerini üst satırının üst kısmına hizalayıp satır içi blok davranışını nasıl koruyabilirim?

Bkz. Http://jsfiddle.net/b2BpB/1/

S: box1 ve box3 öğelerini üst div öğesinin üst kısmına nasıl hizalayabilirsiniz 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;
}

Çok takdir Yardım ...

Teşekkür: Bu soru daha önce https://stackoverflow.com/users/20578/paul-d-waite tarafından verilen bir yanıttan çatallanmıştır : Bir CSS öğesinin içerik genişliğine otomatik olarak yeniden boyutlandırılması ve aynı zamanda ortalanması

vertical-alignCSS özelliğini deneyin .

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

Bunu #box3da uygulayın .

Diğerlerinin söylediği gibi vertical-align: top, arkadaşın.

Burada bonus olarak, Internet Explorer 6 ve Internet Explorer 7'de de çalışmasını sağlayan ek geliştirmeler içeren çatallı bir keman;)

Örnek: burada

Dikey hizalama kullanın: üst; senin jsfiddle üzerinde gösterdiğim gibi, üstte istediğiniz öğe için.

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

Kayan nokta ekleyebilirsiniz: sol; kutuların her biri için (kutu1, kutu2, kutu3).

http://jsfiddle.net/Wa4ma/

Veya div'a biraz içerik ekleyebilir ve satır içi tablo kullanabilirsiniz