Верска дивами: 3 столбца

Тема в разделе "Веб-дизайн", создана пользователем unsiker, 20 янв 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. unsiker

    unsiker

    Регистр.:
    6 июн 2008
    Сообщения:
    465
    Симпатии:
    172
    Верстка дивами: 3 столбца

    Вывожу на екран картинки. Вывод блочный тоесть <a href="img">img</a>. Количество картинок заранее не известно.
    Подскажите как дивами расположить их в три столбца?
     
  2. pslava

    pslava

    Регистр.:
    16 май 2007
    Сообщения:
    618
    Симпатии:
    122
    В цыкле {
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    }

    .cls {
    float:left; width: 100px; display: block;
    }

    Плюс такого метода еще и в том, что если окно уменьшится - то и столбцов например станет 2 или 1, в зависимости от размеров экрана, и не нужно будет прокручивать скролером
     
  3. unsiker

    unsiker

    Регистр.:
    6 июн 2008
    Сообщения:
    465
    Симпатии:
    172
    Не самый удачный пример. так как картинки расположены один к одному и не в 3 ряда, а в 10 (вернее сколько влезет по ширине). Может есть более удачные реализации?
     
  4. pslava

    pslava

    Регистр.:
    16 май 2007
    Сообщения:
    618
    Симпатии:
    122
    тогда просто в цыкле:
    В цыкле {
    <div class=cls><a href="img">img</a></div>
    }

    .cls {
    float:left; width: 100px; display: block;
    }
    и оно тебе по ширине всунет сколько влезет фоток:)
     
  5. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    если надо в три столбца, то обрезать строку через каждые три картинки с clear:

    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    <div style="clear:both;"></div>

    или если ширина картинок известна например 100px, то поместить все картинки в div с шириной трёх картинок 300px:

    <div style="width:300px;">
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    <div class=cls><a href="img">img</a></div>
    </div>
     
  6. unsiker

    unsiker

    Регистр.:
    6 июн 2008
    Сообщения:
    465
    Симпатии:
    172
    :mad: Мне не нужно сколько влезет ... мне нужно 3 сколько бы картинок небыло ... хоть милион, мне нужно 3 столбца. Не предлагай такой вариант больше.

    Я и сам такое придумал ... да вот незадача: я вывожу блочно, а возможности проверить что я вывел 3 раза div нету.

    ширина извесна, вот только шаблон хочу сделать универсальный. А то получится если я имею 10 картинок с разной шириной то мне нужно 10 шаблонов штамповать либо перед проверки штамповать, а это не алес гут.
     
  7. sasyk

    sasyk Постоялец

    Регистр.:
    10 ноя 2008
    Сообщения:
    130
    Симпатии:
    6
    А JS тут не в помощь?
    Тут наверное без нее никуда
    CSS думать не будет. Он делает то что ему говорят и ему все равно сколько картинок и каких розмеров
     
  8. sasyk

    sasyk Постоялец

    Регистр.:
    10 ноя 2008
    Сообщения:
    130
    Симпатии:
    6
    а если ширина картинки выйдет шире слоя?
    Весь дизайн пойдет на смарку
     
  9. unsiker

    unsiker

    Регистр.:
    6 июн 2008
    Сообщения:
    465
    Симпатии:
    172
    Уже второй день решаю эту проблему, и единственно что отхватил у буржуев:


    #cat {
    margin: 0 auto 0 auto;
    width: 100%;
    }

    #cat .catItem {
    width: 33%; float: left;
    margin: 0 0 10px; 0;
    }



    Но какая то мистификация: идут какие то пробелы, причем не всегда, а только на пару страницах. Может кто то подскажет из за чего?

    В атаче скрин ... ВНИМАНИЕ ЕРО КОНТЕНТ. Меньше 18 лет не смотреть
    ____________
    админов просьба не блочить так как действительно работаю над сайтом с такой тематикой (востребованый).
     

    Вложения:

    • div.JPG
      div.JPG
      Размер файла:
      113,9 КБ
      Просмотров:
      69
    nomargo нравится это.
  10. TS.ka

    TS.ka Постоялец

    Регистр.:
    13 сен 2008
    Сообщения:
    66
    Симпатии:
    13
    Судя по скрину у тебя все картинки одного размера. Значит по совету BDS все должно работать без проблем. А насчет пробелов лучше код посмотреть, чем скрин. Как всегда из-за какой-нить мелочной ерунды глючит.
     
Статус темы:
Закрыта.