Как выровнять div в верхней части своего родителя, но сохраняя поведение встроенного блока?

В: Как вы можете сделать box1 и box3 выровнены в верхней части родительского 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;

Помогите оценить...

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

Ответ 1

Попробуйте vertical-align свойство CSS.

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

Примените его к #box3 тоже.

Ответ 2

как сказали другие, vertical-align: top - ваш друг

в качестве бонуса здесь раздвоенная скрипка с добавленными улучшениями, которые заставляют ее работать и в IE6/7;)

Пример: здесь

Ответ 3

Использовать вертикальное выравнивание: верх; для элемента, который вы хотите в верхней части, как я показал на вашем jsfiddle.

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

Ответ 4

Вы можете добавить float: left; для каждого из полей (box1, box2, box3).

http://jsfiddle.net/Wa4ma/

Ответ 5

Или вы можете просто добавить некоторый контент в div и использовать inline-table