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

[unsiker]

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

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

 

[pslava]

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

В цыкле {
<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, в зависимости от размеров экрана, и не нужно будет прокручивать скролером

 

[unsiker]

В цыкле {
<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;
}

Не самый удачный пример. так как картинки расположены один к одному и не в 3 ряда, а в 10 (вернее сколько влезет по ширине). Может есть более удачные реализации?

 

[pslava]

Не самый удачный пример. так как картинки расположены один к одному и не в 3 ряда, а в 10 (вернее сколько влезет по ширине). Может есть более удачные реализации?

тогда просто в цыкле:
В цыкле {
<div class=cls><a href="img">img</a></div>
}

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

 

[polyetilen]

если надо в три столбца, то обрезать строку через каждые три картинки с 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>

 

[unsiker]

и оно тебе по ширине всунет сколько влезет фоток

Мне не нужно сколько влезет ... мне нужно 3 сколько бы картинок небыло ... хоть милион, мне нужно 3 столбца. Не предлагай такой вариант больше.

<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>

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

или если ширина картинок известна

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

 

[sasyk]

А JS тут не в помощь?
Тут наверное без нее никуда
CSS думать не будет. Он делает то что ему говорят и ему все равно сколько картинок и каких розмеров

 

[sasyk]

ну поставь дивам ширину в 33% и text-align:center (для картинок)..

а если ширина картинки выйдет шире слоя?
Весь дизайн пойдет на смарку

 

[unsiker]

Уже второй день решаю эту проблему, и единственно что отхватил у буржуев:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

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

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

 

[TS.ka]

Судя по скрину у тебя все картинки одного размера. Значит по совету Для просмотра ссылки Войди или Зарегистрируйся все должно работать без проблем. А насчет пробелов лучше код посмотреть, чем скрин. Как всегда из-за какой-нить мелочной ерунды глючит.