Показать сообщение отдельно
  #1 (permalink)  
Старый 16.08.2012, 14:45
Новичок на форуме
Отправить личное сообщение для byxah Посмотреть профиль Найти все сообщения от byxah
 
Регистрация: 09.09.2011
Сообщений: 8

Float и vertical-align:bottom у элементов
Приветствую.

Необходимо реализовать макет списка работ в резине:
img1 - для узких мониторов
img2 - для широких мониторов

проблема в том что, для img2 - текст должен быть прилеплен на уровне низа фотки, а при сужении страницы перемещался под фотографию.

Пока удалось реализовать по групно:
float для картинки и небольшого хака с невидимой картинкой внутри span inline элемента для текста:

<img src="img" style="float:left;" height=300>
<span>
<img src="/i/1x1.gif" width=200 height=0>
Текст
</span>

но вертикального выравнивания не смог добится.

И наоборот, если сделать отображение для span через display: table-cell и задание высоты, то прижать текст к низу можно, но при сужении страницы текст не переносится под фотку.


<img src="img" style="float:left;" height=300>
<span style="display:table-cell; height:300px; vertical-align:bottom;">
<img src="/i/1x1.gif" width=200 height=0 >
Текст
</span>


Есть ли решение без JS или нет?
Изображения:
Тип файла: jpg img1.jpg (113.8 Кб, 3 просмотров)
Тип файла: jpg img2.jpg (123.5 Кб, 3 просмотров)

Последний раз редактировалось byxah, 16.08.2012 в 14:53.
Ответить с цитированием