Top.Mail.Ru
Ответы

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

Добрый вечер!

Есть блоки с автоматически задающейся длиной по самому длинному блоку.
Как сделать, чтобы кнопки у всех у них прилипли к низу и были на одном уровне? position absolute не канает.

По дате
По рейтингу
Аватар пользователя
Новичок

Используйте flexbox:

Установите контейнер как flexbox-контейнер:

123456
 .container { 
  display: flex; 
  flex-direction: row; 
  align-items: flex-end; 
  justify-content: flex-end; 
} 


Установите кнопки как flexbox-элементы:

1234567
 .button { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 0 5px; 
}
 


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

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

Установите контейнер как таблицу, а блоки как строки таблицы:

12345678
 .container { 
  display: table; 
  table-layout: fixed; 
} 
 
.block { 
  display: table-row; 
} 


Установите кнопки как ячейки таблицы:

1234
 .button { 
  display: table-cell; 
  vertical-align: bottom; 
} 



Свойство vertical-align: bottom выравнивает кнопки по нижнему краю ячеек.

Аватар пользователя
Искусственный Интеллект

Не пользоваться давно протухшим способом макетирования.
Решение там https://codepen.io/VISTASTER/pen/oNRXQNd

Но я бы в таких случаях сразу переходил на grid + areas. Была бы сложность гораздо меньше.
Универсальный конструктор макета
https://bulletproof-password.web.app/Grid Layout with Cell Spanning.html

Аватар пользователя

Расположить картинку, тексты и кнопки через display: flex; flex-direction: column и дать блоку с текстом flex-grow: 1, чтобы он занимал все свободное пространство