Как прижать кнопки к нижним углам блока?

Question

[Eastar]

Друзья, необходимо прижать кнопки к правому и левому нижним краям. Проблема в том, что есть несколько таких блоков с разными паддингами и, если делать position: absolute, то нужно позиционировать кнопки для каждого блока вручную. Есть ли красивое решение такой задачи? Размеры кнопок фиксированные, а высота родительского контентного блока меняется в зависимости от контента и меняются паддинги.

Answer 1

[Алексей Зуев]

Вариант с flex
Если высота блока не жесткая. а меняется в зависимости от контента и меняются паддинги, то почему бы просто не дать контенту отодвигать кнопки вниз. Пример

Comments

[Eastar]

Спасибо! Флексы очень заманчивы, но я пока изучаю более традиционную верстку. Флексы уже используются в продакшне? Если ли у вас примеры сайтов и их использованием?

[Алексей Зуев]

sitepoint theguardian

[Алексей Зуев]

Роман Шаталов: у вас вертикальный отступ между контентом и кнопками разный будет? высота блоков жесткая?

[Eastar]

Алексей Зуев: Паддинги в пределах одного блока не меняются, просто есть несколько однотипных блоков, но с разными паддингами. Высота блока задана min-height, так что если контента мало, то кнопки все равно должны быть внизу полупустого блока.

[Алексей Зуев]

Роман Шаталов: min-height можно контенту указать

[Алексей Зуев]

Роман Шаталов: вот так

[Eastar]

Алексей Зуев: Спасибо большое! Это решение jsfiddle.net/EaSTaR/a45jyk2s/3

Answer 2

[Максим Тимофеев]

у блока position:relative;
кнопкам position:absolute; bottom:0;

тогда кнопки будут позиционироваться по нижнему краю ближайшего предка с position:relative;

Answer 3

[Pretor DH]

Твой исправленный пример.

Comments

[Eastar]

в вашем решении игнорируются паддинги контентного блока. тогда нужно задавать кнопкам маргины размером с паддинги блока.

[Eastar]

в проблеме описано "если делать position: absolute, то нужно позиционировать кнопки для каждого блока вручную. "