Текст к низу блока
как прилепить текст к низу блока
варианты с position:absolute не вариант, высоту фиксирован блоку я поставить не могу, т.к адаптивная верстка поэтому вариант с line-height или задание определ отступа тоже отпадает
Кто какие еще варианты знает?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Привязать картинки к низу блока
Привет, форумчане. Появилась следующая проблема: нужно привязать картинки к низу блока. Пользуюсь.
Фон блока не прижимать к самому низу
Здравствуйте. Показалось, что все просто, но оказалось нет. В общем, между двух появляющийся.
Прилипание блока к низу экрана, когда его не видно
Всем привет. Подскажите как решить такую задачу: Есть блок <div >
152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493
у блока сделать display:table-cell; vertical-align:bottom;
Регистрация: 07.04.2014
Сообщений: 174
способ хороший но не подходит, блоки становятся шириной контента и все валиться! Но все равно спасибо! )
152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493
ну в порядке бреда можно еще так попробовать:
Блок обертка, внутри блок с текстом
1 2 3 4
Блок обертка{ display: flex; box-align:end; }
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как прижать блок к низу блока, без абсолют и flex?
Как прижать блок к низу блока, без абсолют и flex?
Прижать текст в tr к низу
Здравствуйте, дано: <table> <tr style="height: 45px;"> <td>fishtext</td> .
Футер прижатый к низу, наезжает на текст
Здравствуйте, делаю сайт на котором не все страницы длинные, есть небольшие и футер висел в.
Текст по ширине блока
Здравствуйте! Есть Блок с картинкой, размер которой заранее не известен. Под картинкой лежит.
vertical-align
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Синтаксис
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты
Значения
baseline Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента. bottom Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех. middle Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. sub Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется. super Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним. text-bottom Нижняя граница элемента выравнивается по самому нижнему краю текущей строки. text-top Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки. top Выравнивание верхнего края элемента по верху самого высокого элемента строки. inherit Наследует значение родителя.
В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height , при этом 0% аналогично значению baseline .
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по ее верхнему краю.
HTML5 CSS2.1 IE Cr Op Sa Fx
vertical-align TEX и LATEX Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства vertical-align
Объектная модель
[window.]document.getElementById(» elementID «).style.verticalAlign
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Как прижать текст к низу div’a ? — Вопросы по CSS
Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��
JoomlaDay Spain, Madrid.
В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.
Выравнивание по низу карточки
При верстке карточек товаров для каталога или аналогичных блоков, описание в карточке может значительно отличаться по объему текста. В результате, контент после этого текста располагается на разной высоте, что в большинстве случаев неприемлемо. Как это исправить?
Варианты решения
Возможные, но некорректные решения
Первый вариант — блоку с текстом можно задать фиксированную высоту, но это будет некорректно, так как неизвестно, какой объем текста будет использоваться для описания.
Второй вариант — блоку, который нужно прижать к низу карточки, присвоить 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%; >> Полезные ссылки