Как выровнять плавающие div по вертикали?

Question

Потому что примеры правил: http://jsfiddle.net/rudiedirkx/wgue7/

Как мне получить бары внизу, а не сверху? Теперь они прилипают к верхней части контейнера (#bars), но я хочу, чтобы они прилипали к нижней части.

Как видите, я не знаю высоту самого высокого бара, поэтому я не знаю высоту контейнера.

Эти q + a не помогают: Вертикально выровнять плавающие div , Вертикально выровнять плавающие DIV

Должно быть просто, верно? Если это помогает: он должен работать только в приличных браузерах.

PS. Количество баров является переменным (не в примере), а их высота. Только их ширина статична. Позиционирование absolute не поможет, потому что у контейнера нет измерений.

Answer 1

Это подойдет :

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

Используется display: table-cell; в родительском div, который по умолчанию имеетvertical-align: baseline; применяется.Это изменяет потребность в float: left; для дочерних элементов div и позволяет нам использовать display: inline-block;.Это также устраняет необходимость исправления CSS.

РЕДАКТИРОВАТЬ - В комментариях к @ тридцатке добавление vertical-align: bottom; к дочерним элементам div удаляет пробел внизу.

Поэтому я изменил CSS выше и jsFiddle.Я сохранил display: table-cell;, так что родительский div оборачивает дочерние div с 0 дополнениями и выглядит красиво и шикарно!

Answer 2

Flexbox! Flexbox - самый лучший.

Пример: http://jsfiddle.net/rudiedirkx/7FGKN/

Flexbox делает это смехотворно простым (и не стоит забывать правильно ):

#container {
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */
}
#container > div {
  /* margin etc here, but nothing layoutish */
}

Вот и все. Две строки CSS: display: flex и align-items: flex-end.