Приветствую.
Необходимо реализовать макет списка работ в резине:
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 или нет?