Как вертикально выровнять плавающие divs в нижней части?

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

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

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

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

Ответы

Ответ 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.

EDIT - за комментарии @thirtydot, добавив vertical-align: bottom; к дочерним divs, удаляет пробел внизу.

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

Ответ 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.