Як вирівняти діва до вершини батьків, але дотримуючись його вбудованої поведінки?

Дивіться: http://jsfiddle.net/b2BpB/1/

З: Як ви можете змусити box1 та box3 вирівняти верхню частину батьківського поділу 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;
}

Допомога високо оцінена ...

Підтвердження: це запитання відхилено від відповіді, попередньо наданої https://stackoverflow.com/users/20578/paul-d-waite : отримання елемента CSS для автоматичного зміни розміру до ширини вмісту і в той же час по центру

Спробуйте vertical-alignвластивість CSS.

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

Застосовуйте і його #box3.

Як казали інші, vertical-align: topце твій друг.

Як бонус, тут є роздвоєна скрипка з додатковими вдосконаленнями, завдяки яким вона також працює в Internet Explorer 6 та Internet Explorer 7;)

Приклад: тут

Використовуйте вертикальне вирівнювання: верх; для елемента, який ви хочете вгорі, як я продемонстрував у вашій jsfiddle.

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

Ви можете додати float: зліва; для кожного з ящиків (box1, box2, box3).

http://jsfiddle.net/Wa4ma/

Або ви можете просто додати деякий вміст до div та використовувати вбудовану таблицю