Используйте 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 выравнивает кнопки по нижнему краю ячеек.
Nested Block Example
This is the nested block. |
Есть блоки с автоматически задающейся длиной по самому длинному блоку.
Как сделать, чтобы кнопки у всех у них прилипли к низу и были на одном уровне? position absolute не канает.