HTML+CSS+JavaScript

Есть галерея картинок на странице, каждая картинка - это превьюшка + название, все обернуто в DIV фиксированной ширины и высоты.
Вопрос: как сделать так, чтобы можно было вывести штук 20 этих DIVов на страницу, а браузер сам бы автоматически подбирал количество превьюшек на строке, разбивая их по строкам?
Написал <div style="float:left">, но это приводит к тому, что весь массив дивов (хоть и правильно поделенных на строки) жмется к левому краю страницы, а справа остается нелицеприятная пустота. Нужно сделать так, чтобы отображалось по центру страницы.

Вот пример, чтобы пояснить...

<style> div { border:1px solid black; } div.pic { float:left; width:100px; height:100px; margin:5px; } </style> <div style="width:380px;height:250px"> <!-- 1-я "картинка" --> <div class="pic" style="background-color:green"></div> <!-- 2-я "картинка" --> <div class="pic" style="background-color:red"></div> <!-- 3-я "картинка" --> <div class="pic" style="background-color:blue"></div> <!-- 4-я "картинка" --> <div class="pic" style="background-color:yellow"></div> </div>

Получается такое: http://img530.imageshack.us/img530/8264/test1lf0.gif
А хотелось бы такое: http://img530.imageshack.us/img530/5949/test2wy2.gif
Ну или как вариант, такое: http://img530.imageshack.us/img530/3217/test3ka4.gif

на css нереализуемо. либо javascript, либо таблица

А как можно сделать это при помощи javascript?

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

читайте внимательнее:

браузер сам бы автоматически подбирал количество превьюшек на строке

очевидно, что с фиксированной шириной ни о какой автоматике речи не может быть.

все равно мне кажется что можно без скриптов обойтись. Просто подробнее нужно информацию дать.

да кудаже подробнее, даже есть пример с картинками ))

хотя в примере ширина фиксирована...
Автору: посмотрите выровнять по центру <div> может подойдет.

Ссылка на выравнивание по горизонтали, так ведь? Если да, то в примере у блока ширина фиксированная.

фиксированная, как и в сообщение автор: Dagdamor (04.03.2008 в 19:36)

если нефиксированая, то только скриптами.

Может я чего не недопонимаю, но вы выше написали *очевидно, что с фиксированной шириной ни о какой автоматике речи не может быть.*

путано написал.

вот что имелось в виду:
есть блок, в нем длоки с изображением и подписью.

если ширина основного блока фиксирована, то при изменение размера окна браузера, превьюшки не будут "смещаться" занимая новое место. тоесть условие браузер сам бы автоматически подбирал количество превьюшек на строке, разбивая их по строкам не будет выполнятся. однако автор в следующем посте ширину блока всетаки фиксирует...

вобщем ждем автора ))

мое мнение - с фиксированной шириной основного контейнера центрирование стилями пройдет, если ширина не задана явно то только скриптом.

вот теперь более понятно. Автор, ждем разъяснений.

Ширина страницы (или внешнего дива) НЕ фиксирована и заранее неизвестна. Если бы я знал ширину заранее, никаких проблем с центрированием не возникло бы. В том-то и дело, что нужно и обеспечить автоматический перенос, и центрирование контента одновременно.

В примере ширина "380px" задана фиксированно только для примера (чтобы можно было у себя создать такой файлик и отобразилась такая же картинка). На самом деле ширина может быть любой, в зависимости от разрешения экрана.

Спасибо всем отписавшимся, но проблема до сих пор не решена (а надо), если все-таки сможете помочь - буду очень благодарен!..

так а в чем проблема собственно?
вы в пхп разбираетесь?
если да то делайте через while, могу показать подробнее на примере

пхп тут совсем не к месту.


пример с библиотекой jQuery

<style> #main{ width:auto; border:1px solid silver;} #main p{     display:block;     float:left;     background:#CCCC99;     width:100px;     height:100px;     margin:10px } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> // размер блока превьюшки + margin var block_small = 120; $(document).ready(function(){     // размер блока внутри которого центрировать     var block_big = $("#main").width();     // количество блоков на странице     var num = (Math.floor(block_big/block_small));     //отступ     var padding_left = (block_big-block_small*num)/2;          $("#container").css({"padding-left":padding_left}) }); $(window).resize(function(){     // размер блока внутри которого центрировать     var block_big = $("#main").width();     // количество блоков на странице     var num = (Math.floor(block_big/block_small));     //отступ     var padding_left = (block_big-block_small*num)/2;          $("#container").css({"padding-left":padding_left}) }); </script> <div id="main"> <div id="container"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </div>

neokortex, да, немного разбираюсь ;) www.phpc.ru

AlexSol, спасибо за пример. Жаль, что чистым CSS разрулить нельзя. Вроде задача не супер-сложная. Будем мучить JS :)

UPD: Пример работает как часы! AlexSol, еще раз спасибо огромное!