Jak wyrównać element DIV do góry jego elementu nadrzędnego, ale zachowując jego zachowanie w wierszu blokowania?

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

P: W jaki sposób można wyrównać pola box1 i box3 do góry nadrzędnego elementu DIV 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;
}

Pomoc bardzo ceniona ...

Potwierdzenie: To pytanie jest rozwidlone z odpowiedzi udzielonej wcześniej przez https://stackoverflow.com/users/20578/paul-d-waite : Pobieranie elementu CSS, aby automatycznie zmieniał rozmiar do szerokości treści i jednocześnie był wyśrodkowany

Wypróbuj vertical-alignwłaściwość CSS.

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

Zastosuj to #box3też.

Jak powiedzieli inni, vertical-align: topjest twoim przyjacielem.

Jako bonus jest tutaj rozwidlone skrzypce z dodatkowymi ulepszeniami, które sprawiają, że działa również w Internet Explorer 6 i Internet Explorer 7;)

Przykład: tutaj

Użyj wyrównania w pionie: do góry; dla elementu, który chcesz na górze, jak pokazałem na twoim jsfiddle.

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

Możesz dodać float: left; dla każdego z pudełek (pudełko1, pudełko2, pudełko3).

http://jsfiddle.net/Wa4ma/

Możesz też po prostu dodać zawartość do div i użyć inline-table