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

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

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

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

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

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

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


vertical-alignment css css-float
person Rudie    schedule 24.05.2011    source источник
comment
разве они уже не выровнены по низу? Или вы хотите их прямо на границе? Похоже, они уже выровнены по низу с помощью vertical-align:bottom;   -  person robx    schedule 25.05.2011
comment
Да, что сказал Робкс. Если вы хотите, чтобы полосы касались только нижней границы, все, что вам нужно было сделать, это удалить padding: 5px;.   -  person Chloe    schedule 24.07.2015

Ответы (2)


arrow_upward
52
arrow_downward

Это поможет:

#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; к дочерним элементам div удаляет пробел внизу.

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

person Code Maverick    schedule 24.05.2011
comment
Я обновил ответ и jsFiddle, но если вы просто измените отступ на padding: 5px 5px 0;, это устранит проблему. - person Code Maverick; 25.05.2011
comment
О, и я удалил vertical-align: bottom;, так как vertical-align: baseline по умолчанию. - person Code Maverick; 25.05.2011
comment
Просто к вашему сведению, если вам нужна поддержка IE7, он не поддерживает display:table-cell, хотя я думаю, что это лучший ответ. - person Paul Sham; 25.05.2011
comment
@Paul - Он сказал, что это только для современных браузеров, поэтому я использовал то, что сделал. = Д - person Code Maverick; 25.05.2011
comment
@ Скотт Да, я знаю. Просто добавляю дополнительную информацию, где могу. Тем не менее проголосовал за ваш ответ. :) - person Paul Sham; 25.05.2011
comment
@Paul Хорошо ... просто проверяю. = Д - person Code Maverick; 25.05.2011
comment
Так что с 5px? Это белое пространство, которое нельзя изменить? Во всех браузерах так? Мне не нравится использовать 5px только потому, что это подходит в данном случае. Почему 5? - person Rudie; 25.05.2011
comment
@Rudie - Извини, я не уверен. Я некоторое время играл с ним, пробуя отрицательные поля/отступы, и так и не смог избавиться от этого зазора в 5 пикселей внизу. Возможно, это то, с чем вам придется жить, чтобы ваш пример работал. Вы могли бы использовать позиционирование, чтобы исправить это, позвольте мне посмотреть, смогу ли я заставить это работать. - person Code Maverick; 25.05.2011
comment
@Scott: Чтобы удалить это нижнее дополнение (на самом деле это не padding), вам нужно vertical-align: bottom. Кроме того, вам не нужен display: table-cell, если вы используете display: inline-block на div. Я также добавил хаки, чтобы заставить inline-block работать в IE6/7. См.: jsfiddle.net/7BBqC/3. Я понимаю, что мог бы просто опубликовать свой собственный ответ на этот вопрос со всеми этими деталями, но я хороший парень :) - person thirtydot; 25.05.2011
comment
@thirtydot - Ты прав. Должно быть, я пробовал vertical-align: bottom; до того, как использовал display: inline-block; для дочерних элементов div. В родительском div использование display: table-cell; эффективно оборачивает div, как float: left, вместо того, чтобы растягиваться по экрану. - person Code Maverick; 25.05.2011
comment
@Rudie - jsFiddle и ответ обновлены с частью предложения @thirtydot! Отлично выглядит сейчас! = Д - person Code Maverick; 25.05.2011
comment
@Scott: Да, я забыл упомянуть, что поменял display: table-cell на float: left, что немного лучше, потому что работает в IE6/7. К сожалению, IE7 по-прежнему имеет около 8 % доли по всему миру, поэтому он по-прежнему Приятно поддержать его где это возможно. В остальном display: table-cell в порядке. Я думаю, это зависит от того, заботится ли ОП об IE7. +1 кстати. - person thirtydot; 25.05.2011
comment
@thirtydot - Да, в исходном описании OP говорилось о приличных браузерах, которые, как я полагал, не включали IE 6 или 7. - person Code Maverick; 25.05.2011
comment
@ Скотт: Ты прав. Я даже не читал вопрос, я просто посмотрел вашу демонстрацию и комментарии и исправил это. - person thirtydot; 25.05.2011
comment
@thirtydot - я ценю это. Это беспокоило меня. Я никогда не рассматривал вертикальное дно, т.к. это было первое, что я попробовал. Но это было с float: left, затем display: inline в дочерних элементах. Затем я перешел к родительскому div, и vertical-align: bottom; сместил его вниз, но некрасиво. Затем я добавил display: inline-block, и это, казалось, исправило все, кроме пробела внизу. Я не знал, что OP хотел, чтобы он был заподлицо, я думал, что это выглядит красиво с отступом 5px вокруг. - person Code Maverick; 25.05.2011
comment
Вам не нужен float: left. Просто сделайте контейнер display: inline-block. Теперь это работает отлично: jsfiddle.net/rudiedirkx/wgue7 @thirtydot Я думаю, вы заслуживаете хотя бы +1... Не хочешь? - person Rudie; 26.05.2011
comment
@Rudie: Я ничего не мог бы написать в ответ на этот вопрос, что еще не было сказано. Если вы хотите дать мне +1, проголосуйте за любой из других ответов, которые я написал, которые, по вашему мнению, заслуживают этого. :) - person thirtydot; 26.05.2011

arrow_upward
42
arrow_downward

ФЛЕКСБОКС! 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.

person Rudie    schedule 04.06.2013
comment
Flexbox настолько крут, что большую часть времени вам даже не приходится иметь дело с плавающими элементами, потому что вы не можете перемещать гибкие элементы! (Тем не менее, вы можете использовать flex-контейнер или что-то еще внутри flex-элемента, что приятно и не делает flexbox менее крутым.) - person BoltClock; 17.11.2013
comment
+1 W3C, Сеть разработчиков Mozilla и Приемы CSS — отличный источник информации о flexbox. Приятно отметить, что на данный момент это только рекомендация WC3. Кто-нибудь может подтвердить или опровергнуть это официально? Текущую поддержку браузера также можно найти по этим ссылкам. - person Code Maverick; 22.11.2013
comment
Поддержка браузера — это все, что имеет значение, и в наши дни она на самом деле очень хороша. IE10 реализован по-старому (но большая часть этого выполнима). IE11 является частью крутого клуба. Однако Firefox по-прежнему не выполняет wrap. - person Rudie; 22.11.2013
comment
в Firefox 28 тоже будет wrap! Победа! - person Rudie; 14.01.2014
comment
Что это за волшебство? - person phuwin; 20.04.2016