Как сделать так, что бы кнопка была внизу блоков?

Question

[Pavel_Proca]

Есть вот такие три блока. У каждого разное количество контента. Как сделать так, что бы кнопка была внизу этих блоков, вне зависимости от их количества контента?

Answer 1

[Ankhena]

Блокам display:flex, либо wrap или direction column, ну и justify-content или stretch
Внутренности кроме кнопки обернуть в отдельный div

https://jsfiddle.net/rs4nkcvw/ - реализация

.wrapper {
  display: flex;
  justify-content: space-between;
}
section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28%;
  border: 1px solid #999;
  border-radius: 7px;
  padding: 10px;
}
button {
  margin: 10px 10px 0;
}

<div class="wrapper">
<section>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptas quae nulla quis ab, quasi odit autem ex amet. Laborum animi, nobis voluptates sint ipsam.</div>
  <button>кнопка</button>
</section>
<section>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis rerum sed dolore, vitae molestias a, dolores, quisquam voluptatem consequatur illum iusto eveniet laudantium natus cupiditate saepe exercitationem quae itaque dolorum aperiam laboriosam. Debitis cum eveniet veritatis, rem, dolorum commodi! Quia.</div>
  <button>кнопка</button>
</section>
<section>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi inventore, doloribus hic!</div>
  <button>кнопка</button>
</section>
</div>

Answer 2

[justdealman]

Абсолютно спозиционировать, компенсировать padding-bottom, чтобы не перекрывало.