Как выровнять нижние блоки в соседних столбцах?

Question

[Андрей Зернов]

Часто приходится сталкиваться с такими задачами как на скрине. Решаю каждый раз костылями.
Через bootstrap делаю несколько столбцов. В каждом из них сверху - динамическое содержимое - текст. Высота этого блока меняется в зависимости от ширины экрана, либо контентного наполнения. А под текстом, например, кнопки (как в скрине). Их нужно выравнивать относительно друг друга ровно.
Почему то не работают способы через display: table-cell и через vertical-align:bottom. Возможно из за стилей bootstrap. Как вообще решается такая тривиальная задача обычно? Может флексами можно как то сделать? Абсолютами точно не вариант.


Вот структура html:

<div class="container">
				<div class="row">
					<div class="col-sm-6">
						<p class="int_text">текст</p>
						<button class="int_button int_button-r">Скачать презентацию</button>
					</div>
					<div class="col-sm-6">
						<p class="int_text">текст</p>
						<button class="int_button">Download presentation (eng)</button>
					</div>
				</div>
			</div>

Answer 1

[Егор Живагин]

Ну, флексами куча вариантов, на ум первое что приходит -

//Просто структуру показываю
div.container
    div.text1
    div.text2
    div.button1
    div.button2

.container { display: flex; flex-wrap: wrap; justify-content: center; }

Ну и свою ширину всем блокам + отступы.

Comments

[Андрей Зернов]

я имею ввиду флексами не всю структуру делать, а конкретно кнопки выровнять. каркас сайта должен быть на bootstrap для кроссбраузерности.
И ширина блоков должна быть динамичная, а не фиксированная.
Вот структура html:

<div class="container">
				<div class="row">
					<div class="col-sm-6">
						<p class="int_text">текст</p>
						<button class="int_button int_button-r">Скачать презентацию</button>
					</div>
					<div class="col-sm-6">
						<p class="int_text">текст</p>
						<button class="int_button">Download presentation (eng)</button>
					</div>
				</div>
			</div>

[Егор Живагин]

Андрей Зернов: а кто мешает совмещать их?)

<div class="container">
        <div class="row row-flex">
          <div class="col-sm-6">
            <p class="int_text">текст</p>
            <button class="int_button int_button-r">Скачать презентацию</button>
          </div>
          <div class="col-sm-6">
            <p class="int_text">текст</p>
            <button class="int_button">Download presentation (eng)</button>
          </div>
        </div>
      </div>

.row-flex { display: flex; flex-wrap: wrap; justify-content: center; }

Размеры динамические - да пожалуйста. Как угодно вообще. Флекс - контейнер, который выравнивает элементы внутри себя.

[Егор Живагин]

Андрей Зернов: вру, код чуть другой. Сейчас покажу...

[Егор Живагин]

Андрей Зернов: Вот . Размеры я не задавал ничему вообще.

[Андрей Зернов]

Егор Живагин: Суперрр! спасибо!!

[Андрей Зернов]

Егор Живагин: ты еще здесь? че то я рано обрадовался. у меня все работает почему то только когда высота столбцов одинакова. по идее так и должно быть. как тебе удалось сделать, что блоки знают про высоту друг друга?

[Андрей Зернов]

Егор Живагин: все, разобрался. контейнеру row-flex тоже нужно задать display: flex;
ты использовал bootstrap 4, а я 3й

[Егор Живагин]

Андрей Зернов: я и не заметил, точно.

Answer 2

[Никита]

Можно юзать плагин match height ссылка

Очень умный плагин для определения соседних блоков и их выравнивания между собой

Comments

[Андрей Зернов]

жжесть)) а без плагинов? неужели нет простого решения?

[Никита]

Андрей Зернов: флекс боксы, таблички )

[Андрей Зернов]

Никита: таблички че то не сработали вкупе с bootstrap.
сделал флексами, как посоветовали