Как прижать кнопку к низу блока?
Как прижать кнопку к низу блока, чтобы она всегда была внизу вне зависимости от наполнения блока контентом.
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
текст
Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста
текст
Отслеживать
задан 26 авг 2019 в 10:30
535 1 1 золотой знак 5 5 серебряных знаков 20 20 бронзовых знаков
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
текст
Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста
текст
Как прижать кнопку к низу блока?
Приветствую.
Подскажите пожалуйста как кнопку прижать к низу блока?
Есть три блока в которых идет текст разной высоты и внизу кнопка, как сделать так чтобы кнопки были на одном уровне?
Прикрепил скриншот.
- Вопрос задан более года назад
- 408 просмотров
4 комментария
Простой 4 комментария
Как прижать кнопку к низу внутри блока div?
Здравствуйте, чет не могу прижать кнопку внутри div блока, контент разные и блоки растягиваются чтобы ровно и красиво смотрелось, а вот кнопка не прижимается к низу, выходит не совсем красиво.
Вот так выходит.
На скрине видно что последнем блоке контент короче и кнопка выше, выглядит это не красиво, по этому я и хочу прижать кнопки к низу.
Блок: .crsl-item < background: #fff; >Кнопка в блоке с эффектом: .podrob < display: block; height: 45px; line-height: 45px; text-align: center; color: #1b1d25; font-size: 14px; font-weight: 400; background: #F7D02F; margin: 0 20px 20px 20px; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition: color 300ms; transition: color 300ms; >.podrob:before < content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition: 300ms ease-out; transition: 300ms ease-out; >.podrob:hover:before < background: #1b1d25; -webkit-transform: scale(1); transform: scale(1); >.podrob:hover
- Вопрос задан более трёх лет назад
- 2618 просмотров
9 комментариев
Простой 9 комментариев
Выравнивание по низу карточки
При верстке карточек товаров для каталога или аналогичных блоков, описание в карточке может значительно отличаться по объему текста. В результате, контент после этого текста располагается на разной высоте, что в большинстве случаев неприемлемо. Как это исправить?
Варианты решения
Возможные, но некорректные решения
Первый вариант — блоку с текстом можно задать фиксированную высоту, но это будет некорректно, так как неизвестно, какой объем текста будет использоваться для описания.
Второй вариант — блоку, который нужно прижать к низу карточки, присвоить position: absolute; bottom: 0; и внизу карточки сделать увеличенный внутренний отступ padding , но опять же вариант некорректен, так как придется надеяться, что этого отступа всегда будет хватать.
Корректное решение
Для корректного решения данной задачи воспользуемся display: flex
Рассмотрим простой пример
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur accusantium corrupti reiciendis nisi voluptatum nobis vitae et, quo quaerat excepturi tempora, libero perspiciatis quae voluptates qui dolores autem doloribus ab. Button Lorem ipsum dolor sit amet Button Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptate vero ipsa praesentium autem nihil. Button Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptate vero ipsa praesentium autem nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptate vero ipsa praesentium autem nihil. Button Есть замечательное свойство flex-grow: 1; , которое позволяет элементу растягиваться и занимать все доступное свободное пространство в родительском блоке, а также есть сокращенная запись этого свойства — flex: 1;
Чтобы свойство flex: 1; для блока заработало, необходимо родительскому блоку присвоить display: flex; и flex-direction: column; чтобы элементы располагались вертикально
Далее, если в ряду карточек у текста одинаковое количество строк, блоки с текстом будут одинаковой высоты, и нижний контент итак будет выровнен по низу карточки
Но если в ряду карточек имеются карточки с разным количеством текста, то карточки растягиваются по высоте самой высокой в ряду и внизу карточки образуется свободное пространство, так как у родительского блока установлено display: flex; , a у него по умолчанию align-items: stretch;
Это свободное пространство занимаем блоком с помощью свойства flex: 1; , а нижний блок с контентом прижимается к низу карточки, чего мы и добивались
.simple__flex < display: flex; justify-content: space-between; >.simple__card < padding: 30px; width: calc(25% - 10px); display: flex; flex-direction: column; /* располагаем и вертикально */ >.simple__text < flex: 1; /* растягиваем на все доступное свободное пространство в карточке */ >.simple__button
Более сложный пример с адаптивной сеткой
Посмотрите пример на Codepen
Полный код примера
Catalog One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, maiores. $49 Buy 
Catalog Two Consectetur adipisicing elit $19 Buy 
Catalog Three Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, ipsum. Lorem ipsum dolor sit amet. $89 Buy 
Catalog Four Consectetur adipisicing elit $39 Buy 
Catalog Five Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi et vel pariatur laborum sed nihil quisquam, neque rerum atque minus! $69 Buy 
Catalog Six Consectetur adipisicing elit onsectetur adipisicing elit $99 Buy @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap"); *, *::before, *::after < box-sizing: border-box; >body < margin: 0; padding: 0; font-family: 'Rubik', sans-serif; >.container < padding: 0 30px; max-width: 1200px; margin: 0 auto; >.card < border-radius: 15px; overflow: hidden; height: 100%; display: flex; flex-direction: column; background: #fff; >.card__image < height: 200px; overflow: hidden; width: 100%; border-radius: 15px; >.card__image img < display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; >.card__body < padding: 15px; flex: 1; display: flex; flex-direction: column; >.card__title < font-size: 24px; text-align: center; margin-bottom: 15px; >.card__text < text-align: center; font-size: 16px; flex: 1; margin-bottom: 15px; font-weight: 300; >.card__bottom < display: flex; align-items: center; justify-content: space-evenly; >.card__cost < font-size: 24px; color: #4a60d7; font-weight: 300; >.button < text-align: center; >.button a < display: inline-flex; padding: 0 15px; background: #4a60d7; align-items: center; justify-content: center; text-align: center; height: 40px; width: 100px; color: #fff; border-radius: 5px; text-decoration: none; transition: all 0.6s ease; >.button a:hover < background: #40ffdc; >.catalog < background: #f1f1f1; padding: 60px 0; >.catalog__title < margin-bottom: 60px; >.catalog__row < display: flex; flex-wrap: wrap; margin: 0 -15px -30px; >.catalog__col < width: 33.33333333%; padding: 0 15px 30px; >@media (max-width: 991.98px) < .container < padding: 0 15px; >.popular__col < width: 50%; >> @media (max-width: 767.98px) < .catalog__col < width: 100%; >> Полезные ссылки