Как прижать кнопку к низу блока?
Как прижать кнопку к низу блока, чтобы она всегда была внизу вне зависимости от наполнения блока контентом.
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

текст

Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста

текст
Как прижать элемент к низу блока css
Простейший вариант для манипуляции одного блока относительно другого решается с помощью позиционирования. Исходный HTML файл:
class="wrapper"> class="content">i am a wrapper class="inside">i am inside
Допустим необходимо блок с классом inside разместить в нижней части относительно блока с классом content:
.wrapper /* Отцентрируем блоки для экспериментов и зададим им ширину*/ margin: 100px auto; width: 300px; > .content background-color: #38d9a9; height: 200px; position: relative; > .inside /* абсолютное позиционирование */ position: absolute; /* прижимаем блок к нижней границе относительно блока с position: relative*/ bottom: 0; /* задаем ширину и цвет бэкграунда для наглядности*/ width: 100%; height: 75px; background-color: #444; >
Как прижать кнопку к низу блока?
Приветствую.
Подскажите пожалуйста как кнопку прижать к низу блока?
Есть три блока в которых идет текст разной высоты и внизу кнопка, как сделать так чтобы кнопки были на одном уровне?
Прикрепил скриншот.
- Вопрос задан более года назад
- 1337 просмотров
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
- Вопрос задан более трёх лет назад
- 2886 просмотров
9 комментариев
Простой 9 комментариев