Как прижать картинку к низу блока css

Как прижать картинку к низу блока css

Регистрация на форуме тут, о проблемах пишите сюда — alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите восстановить пароль

Поиск по форуму
Расширенный поиск
К странице.

Да-да, заезженный вопрос)

В чем задача — прижать пикчу к низу div, проблема в том, она прижимается к самому низу документа, заезжая за футер.

Я думаю, что это из за того, что я не указал высоту #page. Как то можно без указания высоты, прижать картинку к низу блока, не заезжая за футер? Или мне везде указать ширину в процентах?

Как прижать изображение к низу блока div ? — Вопросы по CSS

Традиционно наш дайджест обозревает новости, расширения, шаблоны и статьи из мира Joomla.

JComments 4.0.4 — компонент комментариев для Joomla 4

21.11.2021 вышла новая версия популярного компонента комментариев JComments. Компонент развивается сообществом на GitHub. Все релизы отмечены как maintaince release. Это означает поддержку расширения в работоспособном состоянии без добавления нового функционала.

Небольшая подборка статей на русском по Joomla 4

Эту подборку сделал один из пользователей нашего чата Joomla. Он в восторге от возможностей Joomla 4. По его мнению, из коробки Joomla позволяет создавать достаточно сложные сайты, даже без сторонних расширений.

Выравнивание по низу карточки

При верстке карточек товаров для каталога или аналогичных блоков, описание в карточке может значительно отличаться по объему текста. В результате, контент после этого текста располагается на разной высоте, что в большинстве случаев неприемлемо. Как это исправить?

Варианты решения

Возможные, но некорректные решения

Первый вариант — блоку с текстом можно задать фиксированную высоту, но это будет некорректно, так как неизвестно, какой объем текста будет использоваться для описания.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *