Как прижать изображение к низу блока css
Да-да, заезженный вопрос)
"header"> "page"> "./img/pic.png" style="color:#0000FF">"pic-bottom"> "footer">
#page < position: relative; >#page .pic-bottom < position: absolute; bottom: 0; >#footer
В чем задача — прижать пикчу к низу div, проблема в том, она прижимается к самому низу документа, заезжая за футер.
Я думаю, что это из за того, что я не указал высоту #page. Как то можно без указания высоты, прижать картинку к низу блока, не заезжая за футер? Или мне везде указать ширину в процентах?
Форумчанин
Регистрация: 19.01.2015
Сообщений: 158
Название темы не соответствует приведенному коду
>>> В чем задача — прижать пикчу к низу div
Тут в коде нету div. Зачем-то секции используются. Семантика?
Вы, в принципе правильно задали стили. Так работает:
"windows-1251"> tmp #header #page < position:relative; background:orange; >#page .picBottom < position:absolute; bottom:0; >#footer "header">111111111 "page">"http://programmersforum.ru/image.php?u=311137&dateline=1421676338" style="color:#0000FF">"picBottom"> "footer">333333333333
Последний раз редактировалось SQLPowerUser; 13.07.2015 в 18:51 .
| SQLPowerUser |
| Посмотреть профиль |
| Найти ещё сообщения от SQLPowerUser |
Как прижать картинки разной высоты к низу родителя не используя position: absolute и flex?
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 2 часа назад
- 23 просмотра
- HTML
- +1 ещё
Как пофиксти проблему с амперсантом?
- 1 подписчик
- 11 часов назад
- 54 просмотра
- HTML
- +2 ещё
Подобное поведение норма?
- 1 подписчик
- 13 часов назад
- 106 просмотров
- HTML
- +3 ещё
Почему не работает переход на страницу?
- 1 подписчик
- 13 часов назад
- 108 просмотров
- HTML
Почему html2pdf выдает пустой лист?
- 3 подписчика
- вчера
- 617 просмотров
- CSS
Что за баг с ховером?
- 1 подписчик
- вчера
- 98 просмотров
- HTML
- +1 ещё
Как блок вывести поверх других?
- 1 подписчик
- вчера
- 56 просмотров
- CSS
- +1 ещё
Почему не подгружается картинка?
- 1 подписчик
- вчера
- 85 просмотров
- CSS
- +2 ещё
Как Python и Selenium заставить найти текст?
- 1 подписчик
- 18 нояб.
- 53 просмотра
- HTML
- +1 ещё
Как сделать данное задание?
- 1 подписчик
- 17 нояб.
- 126 просмотров
от 150 000 ₽
от 35 000 до 40 000 ₽
20 нояб. 2023, в 10:41
7500 руб./за проект
20 нояб. 2023, в 10:40
5000 руб./за проект
20 нояб. 2023, в 10:22
1500 руб./в час
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Не могу зайти в mozilla thunderbird, после насройки почтового сервера. Хотя в логах клиент прошел аутентификацию. Что делать?
- 2 подписчика
- 0 ответов
- 3 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
- 2 подписчика
- 2 ответа
- 2 подписчика
- 2 ответа
- 2 подписчика
- 4 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
Прижать img к низу p
Вопрос: как мне прижать картинку внизу параграфа так, чтобы нижняя граница картинки выравнивалась по последней линии текста, независимо от количества текста в самом параграфе?
Отслеживать
SuperHuman
задан 24 янв 2016 в 15:30
SuperHuman SuperHuman
254 1 1 серебряный знак 12 12 бронзовых знаков
Пожалуйста, придерживайтесь принятой практики в отношении приветствий.
24 янв 2016 в 15:42
надо, чтобы нижняя граница картинки выравнивалась по последней линии текста?
24 янв 2016 в 15:47
@Streletz, спасибо за замечание, учту.
24 янв 2016 в 16:40@lexxl, да, именно так. Чтобы текст обтекал картинку с любой из сторон. В моем случае, картинка прижата к правой стороне.
24 янв 2016 в 16:42
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
* < margin: 0; padding: 0; >.content < display: flex; width: 80%; margin: auto; >.content p < display: flex; align-items: center; flex-direction: column-reverse; text-align: justify; >.content p img
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Как вариант с помощью FlexBox
Отслеживать
ответ дан 24 янв 2016 в 15:47
Kuat Mustafin Kuat Mustafin
692 4 4 серебряных знака 11 11 бронзовых знаков
Спасибо за идею, Flexbox еще не использовал. Но немного не то, надо чтобы текст обтекал картинку.
24 янв 2016 в 16:44
@SuperHuman как вам такое решение codepen.io/kuatmus/pen/wMyQNa
24 янв 2016 в 18:54
годное решение, но есть косяк, при увеличении кол-ва текста, картинка растягивается 🙂
24 янв 2016 в 20:23
Так добавьте max-height сколько вам нужно, вопрос изначально не так понял, рад если помог 🙂
24 янв 2016 в 20:26
Хорошо. Спасибо 🙂 Еще подожду — может еще кто-то варианты предложит.
24 янв 2016 в 21:15Решение через absolute :
p < position: relative padding-right: 370px; // 350px ширина картинки + 20px отступ min-height: 150px; // минимальная высота картинки overflow: hidden; >p img
Решение через inline-block и calc :
p span < // оборачиваем весь текст (НЕ включая картинку) в тег span display: inline-block; vertical-align: bottom; width: calc(100% - 370px); // 370 аналогично 1му варианту >p img
В обоих решениях мы точно знаем размеры картинки, а это значит что такое решение не лучшие для адаптивной верстки. Возможно для адаптивной верстки лучше использовать js
Как прижать изображение к низу блока div ? — Вопросы по 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.