Xpoint
   [напомнить пароль]

Расположение элементов в галерее

Метки: [без меток]
2009-01-19 18:51:27 [обр] Андрей[досье]
Помогите пожалуйста с вёрсткой. У меня такое задание:
Есть галерея по ширине экрана (ширина галереи = ширине окна браузера минус отступы). В ней картинки с подписями под ними, они выравниваются по центру в галерее и при необходимости переходят на другую строку. Как сверстать такую галерею?
спустя 8 часов [обр] Дмитрий Юров(83/411)[досье]
Как вариант, обычными дивами с float:left:
<div>
<div style="float:left; background-color: red; border: 5px solid green; width: 150px; height:150px; margin: 20px;"></div>
<div style="float:left; background-color: red; border: 5px solid green; width: 150px; height:150px; margin: 20px;"></div>
<div style="float:left; background-color: red; border: 5px solid green; width: 150px; height:150px; margin: 20px;"></div>
<div style="float:left; background-color: red; border: 5px solid green; width: 150px; height:150px; margin: 20px;"></div>
<div style="float:left; background-color: red; border: 5px solid green; width: 150px; height:150px; margin: 20px;"></div>
<div style="float:left; background-color: red; border: 5px solid green; width: 150px; height:150px; margin: 20px;"></div>
</div>
спустя 21 час [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]
Float не позволяет выполнить условие центрирования. Скорее уж что-то навроде такого...
<!doctype html><!-- включили стандартный режим отображения -->
<style type="text/css">
.gallery {
   margin: 0 200px;
   padding: 0;
   text-align: center;
   border: 1px solid #aca;
   list-style: none;
}
.gallery li {
   display: -moz-inline-grid; /* костыль для FF2 */
   display: inline-block;
   margin: 10px;
   padding: 5px;
   background: #ccc;
   border: 1px solid #caa;
   width: 110px;
   height: 110px;
   text-align: left;
}
.gallery li p {
   margin: 0;
   display: block; /* второй костыль для FF2 */
   height: 90px;
   width: 90px;
   padding: 10px;
   background: #aac;
}
* html .gallery li {
   display: inline; /* костыль для сломанного 'inline-block' в IE6 */
}
*+html .gallery li {
   display: inline; /* то же для IE7 */
}
</style>
<ul class="gallery"><!-- 
   Внимание! Пробелы между LI имеют значение, т.к. отображаются как текст в строке!
--><li>
   <p>Элемент</p></li><li>
   <p>Элемент</p></li><li>
   <p>Элемент</p></li><li>
   <p>Элемент</p></li><li>
   <p>Элемент</p></li><li>
   <p>Элемент</p></li><li>
   <p>Элемент</p></li><li>
   <p>Элемент</p></li><li>
   <p>Элемент</p></li></ul>
спустя 11 часов [обр] Андрей[досье]
Супер! Илья Cтpeльцын aka SelenIT, спасибо большое. :)
Powered by POEM™ Engine Copyright © 2002-2005