VPF::Таблица слоями - Форум программистов

KgCoder

Дата 15.5.2009, 12:56 (ссылка)

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

Загрузка ...

Шустрый

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

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

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

Ctulhy

Дата 15.5.2009, 12:58 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

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

ну а если

Код


<div style="display:inline">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>

--------------------

скучно в Москве и дождливо в Крыму.

KgCoder

Дата 15.5.2009, 13:30 (ссылка)

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

Загрузка ...

Шустрый

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

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

Извините, я наверно не правильно изьяснился. Вот проблемный код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Floating trouble</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #gallery-body {
      width: 600px;
      padding: 5px;
    }
    .gallery-element {
      float: left;
      width: 160px;
      margin: 5px 11px;
    }
    .gallery-element img {
      display: block;
      width: 160px;
      height: 160px;
      margin: 5px;
    }

  </style>
</head>

<body>
  <div id="gallery-body">

    <!-- Первая строка -->
    <div class="gallery-element">
      <img src="" />
      <h4>Короткое описание</h4>
    </div>
    <div class="gallery-element">
      <img src="" />
      <h4>Проблема с длинным текстом при флоатах...</h4>
    </div>
    <div class="gallery-element">
      <img src="" />
      <h4>Короткое описание</h4>
    </div>

    <!-- Вторая стока -->
    <div class="gallery-element">
      <img src="" />
      <h4>Короткое описание</h4>
    </div>
    <div class="gallery-element">
      <img src="" />
      <h4>Короткое описание</h4>
    </div>
    <div class="gallery-element">
      <img src="" />
      <h4>Короткое описание</h4>
    </div>

    <!-- Треться строка -->
    <div class="gallery-element">
      <img src="" />
      <h4>Короткое описание</h4>
    </div>

  </div>
</body>

</html>

KgCoder

Дата 15.5.2009, 13:57 (ссылка)

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

Загрузка ...

Шустрый

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

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

Попробовал так:

Код


  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #gallery-body {
      width: 600px;
      padding: 5px;
    }
    .gallery-element {
      display: inline-block;
      width: 160px;
      margin: 5px 11px;
      vertical-align: top;
    }
    .gallery-element img {
      display: block;
      width: 160px;
      height: 160px;
      margin: 5px;
    }

  </style>

  <!--[if IE]>
  <style>
    .gallery-element {
      display: inline;
    }
  </style>
  <![endif]-->

Работает вроде...

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