Как прижать текст к низу div’a ? — Вопросы по CSS
Бесплатный плагин вставки модулей Joomla в JoomShopping. Нередко, при разработке интернет-магазина на Joomla JoomShopping бывает нужно вывести информацию из модулей Joomla в карточке товара или в категории. Обычно это делается программным методом прямо в шаблоне магазина.
Вышел релиз Joomla 4.1.4
Доступна к загрузке Joomla 4.1.4. Это релиз с исправлениями ошибок и улучшениями для серий Joomla 4.0.x.
Сбор средств для помощи нашему камраду voland’у
Сообщество Joomla!, объявляется сбор средств для помощи нашему камраду Болотову Сергею, на форуме — voland, создатель бота Ванга, повелитель минусов на форуме )).
Как прижать текст к низу блока css
Как прижать текст к низу div’a ? — Вопросы по CSS
JComments 4.0.4 — компонент комментариев для Joomla 4
Небольшая подборка статей на русском по Joomla 4
Прилипание блока к низу экрана, когда его не видно
Всем привет. Подскажите как решить такую задачу: Есть блок <div >
Прижать текст в tr к низу
Здравствуйте, дано: <table> <tr style="height: 45px;"> <td>fishtext</td> .
Футер прижатый к низу, наезжает на текст
Здравствуйте, делаю сайт на котором не все страницы длинные, есть небольшие и футер висел в.
Текст по ширине блока
Здравствуйте! Есть Блок с картинкой, размер которой заранее не известен. Под картинкой лежит.
Выравнивание по низу карточки
При верстке карточек товаров для каталога или аналогичных блоков, описание в карточке может значительно отличаться по объему текста. В результате, контент после этого текста располагается на разной высоте, что в большинстве случаев неприемлемо. Как это исправить?
Варианты решения
Возможные, но некорректные решения
Первый вариант — блоку с текстом можно задать фиксированную высоту, но это будет некорректно, так как неизвестно, какой объем текста будет использоваться для описания.
Второй вариант — блоку, который нужно прижать к низу карточки, присвоить position: absolute; bottom: 0; и внизу карточки сделать увеличенный внутренний отступ padding , но опять же вариант некорректен, так как придется надеяться, что этого отступа всегда будет хватать.
Корректное решение
Для корректного решения данной задачи воспользуемся display: flex
Рассмотрим простой пример
Есть замечательное свойство flex-grow: 1; , которое позволяет элементу растягиваться и занимать все доступное свободное пространство в родительском блоке, а также есть сокращенная запись этого свойства — flex: 1;
Чтобы свойство flex: 1; для блока <div ></div> заработало, необходимо родительскому блоку <div ></div> присвоить display: flex; и flex-direction: column; чтобы элементы располагались вертикально
Далее, если в ряду карточек у текста одинаковое количество строк, блоки с текстом будут одинаковой высоты, и нижний контент итак будет выровнен по низу карточки
Но если в ряду карточек имеются карточки с разным количеством текста, то карточки растягиваются по высоте самой высокой в ряду и внизу карточки образуется свободное пространство, так как у родительского блока <div ></div> установлено display: flex; , a у него по умолчанию align-items: stretch;
Это свободное пространство занимаем блоком <div ></div> с помощью свойства flex: 1; , а нижний блок с контентом прижимается к низу карточки, чего мы и добивались