0

Привет. Есть набор горизонтальных блоков. Как в блоке вертикально выровнять картинки и текст-описание прибить снизу... Сдесь проблема в том, что картинки разного размера.

<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>

vertical-align :middle и картинки по вертикали выровнены. Но как быть с блоком текста? position:absolute скажете вы. Но тогда текст будет наезжать на картинку. Оптимально, когда блок с тектом имеет динамический размер, но если можно сделать с фиксированным, то пусть будет...

А да, текст также на 1 уровне.

2 ответа 2

1

Очень своеобразный код, конечно, если уж делаешь таблицами, то действительно лучше сделай так, как тебе посоветовал densmith, должны помочь эти ресурсы: http://htmlbook.ru/html/table , http://htmlbook.ru/html/td , попробуй поиграть с объединением ячеек и т.д., меньше проблем и выглядит посолидней.

0

Если таблицей решил делать, то размещай в 2 ряда: 1 ряд — картинки, 2 — описания к ним. Так меньше вероятных косяков вылезет.

А по-нормальному два варианта:
1. Картинки в квадратный див с overflow:hidden запихивай.
2. Либо делай <img style="height: Xpx" src="" />.

2
  • нельзя обрезать картинки . Они подружаются в оригинальном размере. Там шаблон smarty не позволить в TR следующий запихнуть текст.
    – koza4ok
    7 мар 2015 в 4:44
  • <img style="height: Xpx" src="" />
    – densmith
    7 мар 2015 в 10:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.