0

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

position: absolute;
bottom: 0;

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

.block {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 320px;
  color: steelblue;
  border: 1px solid red;
  text-align: center;
}

.text {
  font-size: 20px;
  margin: 0 auto 0;
}

.button {
  position: absoulte;
  bottom: 0;
  width: 80px;
  height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <img src="https://picsum.photos/id/223/200/150" alt="">
  <p class="text">текст</p>
  <button class="button">Button</button>
</div>
<div class="block">
  <img src="https://picsum.photos/id/222/200/150" alt="">
  <p class="text">Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста</p>
  <button class="button">Button</button>
</div>
<div class="block">
  <img src="https://picsum.photos/id/225/200/150" alt="" />
  <p class="text">текст</p>
  <button class="button">Button</button>
</div>

1 ответ 1

1

Не очень понял что значит, кнопки выпадают из потока, но если имеется ввиду чтобы при растягивании блока по ширине, они всегда оставались по центру, то попробуйте обернуть кнопку в контейнер btn-cont сделать его абсолютным и на всю ширину. Внутри расположите Вашу кнопку и сделайте контейнер flex, с justify-content: center. Тем самым блок всегда будет внизу и при расширении или уменьшении родителя кнопка будет располагаться в центре. Если же имеется ввиду, чтобы текст не заезжал на кнопку, то добавьте родителю padding-bottom: (высота кнопки +- несколько пикселей) Пример ниже (без отступов):

.block {
  position: relative;
  display: inline-block;
  width: 200px;
  min-height: 320px;
  color: steelblue;
  border: 1px solid red;
  text-align: center;
  padding-bottom: 40px
}

.text {
  font-size: 20px;
  margin: 0 auto 0;
}

.btn-cont {
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 80px;
  height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <img src="https://picsum.photos/id/223/200/150" alt="">
  <p class="text">текст</p>
  <div class="btn-cont">
    <button class="button">Button</button>
  </div>
</div>
<div class="block">
  <img src="https://picsum.photos/id/222/200/150" alt="">
  <p class="text">Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста</p>
  <div class="btn-cont">
    <button class="button">Button</button>
  </div>
</div>
<div class="block">
  <img src="https://picsum.photos/id/225/200/150" alt="" />
  <p class="text">текст</p>
  <div class="btn-cont">
    <button class="button">Button</button>
  </div>
</div>

2
  • в центральном блоке кнопка поверх текста, а она должна быть после текста прижата к низу блока
    – Imp3l
    26 авг 2019 в 10:55
  • @Imp3l поправил ответ. Так? 26 авг 2019 в 10:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.