VPF::Выровнить картинку в блоке по вертикали внизу

NDenis

Дата 16.7.2009, 14:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

Есть код:

Код


<div class="recom">
  <div class="pr_pic"><img src="_pics/gabriella_rocha_samira.jpg" alt="Gabriella Rocha Samira" /></div>
  <p><a href="#" title="Gabriella Rocha Samira">Gabriella<br />Rocha Samira</a><br /><span class="price">2870 руб.</span></p>
</div>

Код


.pr_pic {
  height:107px;
  position:relative;
  vertical-align:bottom;
}

Нужно в блоке pr_pic выровнить картинку по низу. vertical-align не помогает.
Проблема в том, что не известна ширина и высота картики. Блок по высоте фиксирован.

WebDisaster

Дата 17.7.2009, 14:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

NDenis, а такой вариант?

Код


.pr_pic img {
    position: absolute;
    bottom: 0;
}

NDenis

Дата 17.7.2009, 14:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

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

WebDisaster

Дата 17.7.2009, 16:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

ОК. А если такое грязное извращение =)

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IMG Vertical Alignment</title>
<style type="text/css">
.recom {
    text-align: center;
    border: 1px solid #f00;
    width: 300px;
}
.pr_pic {
    height:107px;
    display:table-cell!important; display: block;
    width: 300px;
    vertical-align: bottom;
    position: relative;
}
.pr_pic img {
    position: relative!important; position: absolute;
    bottom: 0;
}
</style>
</head>

<body>
    <div class="recom">
        <div class="pr_pic">
           <img src="_pics/gabriella_rocha_samira.jpg" alt="Gabriella Rocha Samira" />
        </div>
       <p>
         <a href="#" title="Gabriella Rocha Samira">Gabriella<br />Rocha Samira</a><br />
             <span class="price">2870 руб.</span>
        </p>
    </div>
</body>
</html>

NDenis

Дата 17.7.2009, 21:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

Спасибо за идею. В понедельник на работе проверю.

NDenis

Дата 20.7.2009, 12:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

WebDisaster, идея прошла, спасибо.
Только возник вопрос. Если при неуказании ширина для блока .pr_pic, то картинка прилипает к левому краю. Как только указываю ширину, отличную от 100% или auto, тогда все встает на место.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »