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

171

Смотрите: http://jsfiddle.net/b2BpB/1/

Q: Как вы можете выровнять 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 для автоматического изменения размера по ширине содержимого и одновременного центрирования

css html tur130
источник

Ответы:

378

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

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

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

носорог
источник
3
Если вы хотите универсальное решение, вы должны применить vertical-align: top;к #boxContainer divселектору. Он применяет стиль ко всем divэлементам внутри boxContainer.
MarthyM
30

Как уже говорили другие, vertical-align: topэто твой друг.

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

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

clairesuzy
источник
6

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

http://jsfiddle.net/Wa4ma/

Алекс Эмилов
источник
Как этот лучше, чем вертикальное выравнивание +1
Юрген
Почему в мире это работает? Мне это нравится, но я бы тоже хотел это понять.
Кевин Баллауги
-1

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

Роберт Вент
источник
зачем добавлять таблицу, когда вы можете использовать вертикальное выравнивание?
Тколсон
1
@tcoulson Я не говорил использовать таблицу, я сказал, что вы можете использовать display: inline-table, которая 3 года назад имела лучшую поддержку браузера и позволяла легко выравнивать по вертикали.
Роберт пошел