Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Выравнивание кнопок внизу контейнера

RunSpedd Знаток (413), на голосовании 5 месяцев назад
Добрый вечер!

Есть блоки с автоматически задающейся длиной по самому длинному блоку.
Как сделать, чтобы кнопки у всех у них прилипли к низу и были на одном уровне? position absolute не канает.
Голосование за лучший ответ
HELPER ㅤ Мыслитель (7423) 6 месяцев назад
Используйте flexbox:

Установите контейнер как flexbox-контейнер:
 .container { 
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}

Установите кнопки как flexbox-элементы:
 .button { 
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}

Параметр align-items: flex-end выравнивает кнопки по нижнему краю контейнера, а свойство justify-content: flex-end выравнивает их по правому краю.

Используйте таблицу:

Установите контейнер как таблицу, а блоки как строки таблицы:
 .container { 
display: table;
table-layout: fixed;
}

.block {
display: table-row;
}

Установите кнопки как ячейки таблицы:
 .button { 
display: table-cell;
vertical-align: bottom;
}


Свойство vertical-align: bottom выравнивает кнопки по нижнему краю ячеек.
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (263972) 6 месяцев назад
Не пользоваться давно протухшим способом макетирования.
Решение там https://codepen.io/VISTASTER/pen/oNRXQNd

Но я бы в таких случаях сразу переходил на grid + areas. Была бы сложность гораздо меньше.
Универсальный конструктор макета
https://bulletproof-password.web.app/Grid%20Layout%20with%20Cell%20Spanning.html
RunSpeddЗнаток (413) 6 месяцев назад
ну, сайт переписывать заказчику я не готов, работаем с тем, что есть)
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (263972) RunSpedd, мой ответ ушел в комент, который ниже
Semen Kapacuk Гуру (3750) 6 месяцев назад
Расположить картинку, тексты и кнопки через display: flex; flex-direction: column и дать блоку с текстом flex-grow: 1, чтобы он занимал все свободное пространство
V̲i̲s̲t̲a̲s̲t̲e̲r̲Искусственный Интеллект (263972) 6 месяцев назад
без css это можно сделать через таблицу с одной ячейкой и vertical-align: bottom

  




Nested Block Example








This is the nested block.




Но я даже проверять не буду, поскольку не все браузеры возможно это поддерживают
RunSpedd Знаток (413) V̲i̲s̲t̲a̲s̲t̲e̲r̲, спасибо, буду пытаться
Похожие вопросы