Держите кнопку внизу независимо от длины текста

Я хочу оставить кнопку внизу, что я сделал возможным, написав больше текста, чтобы подтолкнуть ее вниз, но она не реагировала на каждое устройство, каким образом я могу сохранить кнопку в div внизу?

:root {
  --clr-primary: #651fff;
  --clr-gray: #37474f;
  --clr-gray-light: #b0bec5;
}

* {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  color: var(--clr-gray);
  margin: 2rem;
}

.wrapper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20rem);
  justify-content: center;
}

.container {
  overflow: hidden;
  box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
  background-color: white;
  text-align: center;
  border-radius: 1rem;
  position: relative;
  margin: 2rem 0.5rem;
}

.banner-img {
  position: absolute;
  background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
  height: 10rem;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile-img {
  width: 8rem;
  clip-path: circle(60px at center);
  margin-top: 4.5rem;
  height: 8rem;
}

.name {
  font-weight: bold;
  font-size: 1.5rem;
}

.description {
  margin: 1rem 2rem;
  font-size: 0.9rem;
}

.btn {
  width: 100%;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  padding: 1rem;
  background-color: var(--clr-primary);
}
<div class = "wrapper-grid">
  <div class = "container">
    <div class='banner-img'></div>
    <img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class = "profile-img">
    <h1 class = "name">Slime</h1>
    <p class = "description">Slimes also commonly called ooze are common types of</p>
    <button class='btn'>Attack this dungeon </button>
  </div>
  <div class = "container">
    <div class='banner-img'></div>
    <img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class = "profile-img">
    <h1 class = "name">Gaint spider</h1>
    <p class = "description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
    <button class='btn'>Attack this dungeon </button>
  </div>
</div>

Кодепен

это отвечает на ваш вопрос?

Cédric 11.05.2022 11:32

@Cédric, это сдвигает изображение влево

Kaito 11.05.2022 11:36
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мое решение было бы:

.container {
  display: flex;
  flex-flow: column nowrap; /* Flex everything inside your cards vertically */
}
.description {
  flex-grow: 1;
  /*
    When a card has more space (because another card is taller
    with more info) - grow the description
  */
}

Вот рабочий фрагмент, нажмите Полная страница вверху справа, чтобы увидеть, как он работает:

:root {
  --clr-primary: #651fff;
  --clr-gray: #37474f;
  --clr-gray-light: #b0bec5;
}

* {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  color: var(--clr-gray);
  margin: 2rem;
}

.wrapper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20rem);
  justify-content: center;
}

.container {
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
  background-color: white;
  text-align: center;
  border-radius: 1rem;
  position: relative;
  margin: 2rem 0.5rem;
}

.banner-img {
  position: absolute;
  background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
  height: 10rem;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile-img {
  width: 8rem;
  clip-path: circle(60px at center);
  margin-top: 4.5rem;
  height: 8rem;
}

.name {
  font-weight: bold;
  font-size: 1.5rem;
}

.description {
  flex-grow: 1;
  margin: 1rem 2rem;
  font-size: 0.9rem;
}

.btn {
  width: 100%;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  padding: 1rem;
  background-color: var(--clr-primary);
}
<div class = "wrapper-grid">
  <div class = "container">
    <div class='banner-img'></div>
    <img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class = "profile-img">
    <h1 class = "name">Slime</h1>
    <p class = "description">Slimes also commonly called ooze are common types of</p>
    <button class='btn'>Attack this dungeon </button>
  </div>
  <div class = "container">
    <div class='banner-img'></div>
    <img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class = "profile-img">
    <h1 class = "name">Gaint spider</h1>
    <p class = "description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
    <button class='btn'>Attack this dungeon </button>
  </div>
</div>

Другие вопросы по теме