Есть галерея картинок на странице, каждая картинка - это превьюшка + название, все обернуто в DIV фиксированной ширины и высоты. Вопрос: как сделать так, чтобы можно было вывести штук 20 этих DIVов на страницу, а браузер сам бы автоматически подбирал количество превьюшек на строке, разбивая их по строкам? Написал <div style="float:left">, но это приводит к тому, что весь массив дивов (хоть и правильно поделенных на строки) жмется к левому краю страницы, а справа остается нелицеприятная пустота. Нужно сделать так, чтобы отображалось по центру страницы.
Вот пример, чтобы пояснить... HTML: <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> Получается такое: А хотелось бы такое: Ну или как вариант, такое:
А чем не устраивает завернуть все DIV align="center"? т.е. HTML: <div align="center" 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> Ну или на крайний случай: HTML: <div align="center"> <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> </div>
Вльдемар Там точно такая же фигня - прямоугольники жмутся к левому краю. S.t.A.M. Оба варианта не работают... посмотри на те картинки, которые я выложил, на то, что мне нужно. Отступы слева и справа должны быть одинаковыми. Второго варианта вообще не понял. "380px" - это для примера, в реальном случае ширина страницы заранее неизвестна.
Dagdamor Вариант 2 у меня получился, засунув внурь главного div'a таблицу и прописав ей align=center и padding-left 5%. Div'ы кубики внутри таблицы. Не знаю, насколько устроит вариант.
Elkaz Тогда уж яваскриптом вычислять количество возможных превьюшек и строить на основанных данных таблицу.
А тебе принципиально <div>? если заменить их на <span> то все будет Ок! HTML: <style> div { border:1px solid black; } span.pic { width:100px; height:100px; margin:5px; } </style> <div align="center" style="width:380px;height:250px"> <!-- 1-я "картинка" --> <span class="pic" style="background-color:green"></span> <!-- 2-я "картинка" --> <span class="pic" style="background-color:red"></span> <!-- 3-я "картинка" --> <span class="pic" style="background-color:blue"></span> <!-- 4-я "картинка" --> <span class="pic" style="background-color:yellow"></span> </div>
Кстати 2-ой вариант работает. Если у тебя превьюшки все одинковой ширины - в стилях дива (там где сейчас 380) задешь ширину дива = ширину превьюхи * N кол-во картинок. Он будет выводить по N-картинок в строке HTML: <style> div { border:1px solid black; } div.pic { float:left; width:100px; height:100px; margin:5px; } </style> <div align="center"> <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> </div>
S.t.A.M. Вариант со спанами не работает в Опере 9 и Firefox там они просто пропадают. Второй вариант не годится, "380px" указано всего лишь для примера, в реальности ширина обрамляющего дива (или страницы) заранее неизвестна.