Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Картинки разной высоты в ряд

Автор: Gleb 26.2.2008, 12:29

Собственно сабж. Пробовал и в DIVе и в ячейке, никак не получается. На сколько я понял, в моих попытках брался центр большей картинки и вся строка распологалась по этому значению, а меньшая картинка была выровнена по нижнему краю большей.

Автор: bars80080 26.2.2008, 12:58

Код


<style>
td { background: #ff0000; width: 100px; height: 100px; text-align: center; vertical-align: middle; }
</style>
<table><tr>
<td><img src="00fon00.png" width="10" height="10" /></td>
<td><img src="00fon00.png" width="10" height="20" /></td>
</tr></table>

что-то такое...

Автор: Gleb 26.2.2008, 13:39

Код


<html>
<head>
    <title>Untitled</title>
    
    <style>
    td { background: #ff0000; width: 400px; height: 400px; text-align: center; vertical-align: middle; }
    </style>
</head>

<body>
<table>
<tr>
<td>
<img src="bigimg/1.jpg" alt="" align="" border="0">
<img src="smallimg/1.jpg" alt="" align="" border="0">
</td>
</tr>
</table>

</body>
</html>

Вот что получилось:
http://ipicture.ru/Gallery/Viewfull/692272.html

Автор: bars80080 26.2.2008, 14:35

Код


<html>
<head>
    <title>Untitled</title>
    
    <style>
    td { background: #ff0000; width: 400px; height: 400px; text-align: center; vertical-align: middle; }
    </style>
</head>

<body>
<table>
<tr><td><img src="00fon00.png" border="0"></td>
<td><img src="00fon00.png" border="0"></td></tr>
</table>

</body>
</html>

работа над ошибками:
каждая картинка в отдельной ячейке таблицы, а не в одной

Автор: NDenis 26.2.2008, 14:36

Код


img {vertical-align:middle;}

а так?
PS:

Цитата

align="" - убрать, это в стилях указывается

Автор: Gleb 27.2.2008, 14:31

bars80080, спасибо, с таблицами все работает.
Все это нужно для превьюшек фотоальбома: несколько уменьшенных копий в ряд, с небольшим увеличением при наведении курсора. Соответственно, чтобы все это отображалось красиво, ряд превьюшек должен быть по середине блока, тогда увеличенная фотография растолкает остальные в разные стороны.

Только вот никак у меня не получается сделать это с применением разметки DIVами без таблиц. Помогите пожалуйста.

Автор: mishaSL 27.2.2008, 15:41

Gleb, в div-ах не работает vertical-align, придется расчитывать margin-ы и проставлять их на картинки.
Или как-нибудь вот так извращаться: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Автор: ilyaILF 27.2.2008, 15:41

А разве так не работает:

Код


<div style="background-color: pink;">
    <img style="vertical-align: middle;" height="50" width="50" src="small.jpg" />
    <img style="vertical-align: middle;" height="200" width="200" src="big.jpg" />
    <img style="vertical-align: middle;" height="50" width="50" src="small.jpg" />
    <img style="vertical-align: middle;" height="200" width="200" src="big.jpg" />    
</div>

, причем и с Доктайпом и без. IMG- строковый элемент, DIV - блочный. Надо у всех тегов <IMG /> задавать стиль vertical-align: middle;

Автор: mishaSL 27.2.2008, 15:51

ilyaILF, а если div должен быть больше по высоте, чем картинка? smile

Автор: ilyaILF 27.2.2008, 16:00

Значит вы, зная размер вашей самой большой фотографии (а они как-правило совсем все разных размеров не делаются, а делаются только двух: превью и полная) можете создать еще один вложенный DIV с заданной высотой (совпадающей с высотой самого большого размера фотографии) и выровнять по высоте уже его:

Код


<div style="background-color: pink; height: 473.5px;">
    <div style="position: relative; top: 50%; left: auto; margin-top: -100px; height: 200px;">
        <img style="vertical-align: middle;" height="50" width="50" src="small.jpg" />
        <img style="vertical-align: middle;" height="200" width="200" src="big.jpg" />
        <img style="vertical-align: middle;" height="50" width="50" src="small.jpg" />
        <img style="vertical-align: middle;" height="200" width="200" src="big.jpg" />    
    </div>
</div>

Высота самого старшего DIV-а в этом случае уже значения иметь не будет, поэтому я и поставил произвольную величину - 473,5px, заведомо ошибочную smile

Автор: Gleb 27.2.2008, 21:14

В общем сделал по примеру ilyaILF. Правда в его примере не учитывается то, что большой превьюшка становится при наведении на нее курсора, и при этом вся центровка начинает сбиваться.
Выкрутился, вставив в блок невидимую картинку с высотой равной увеличенной превьюшке.