Равномерное пространство галерея изображений

Question

У меня есть галерея изображений, каждая из которых имеет одинаковую ширину и высоту, скажем, 10 пикселей. Я хочу, чтобы они разнесены так, что есть 5 строк, и они кажутся 5px друг от друга со всех сторон. Контейнер div имеет отступы 5px. Есть несколько строк!

Моя проблема заключается в том, что если я дам каждому изображению левый край 5px затем:

а) контейнер DIV подобран и поэтому только 4 изображения помещаются на строку как пятые маржинальных шунтов его на следующая строка.

b) Контейнер div имеет дополнительный 5px, что приводит к дополнительному промежутку в конце каждого ряда.

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

Answer 1

Вы хотите иметь правое и нижнее поле на изображениях div и сверху, слева от заполнения на контейнере div.

CSS:

.container { 
    padding: 5px 0 0 5px; 
    background-color: green; 
    width: 75px; 
    position: relative; 
    overflow: hidden; 
} 

.image { 
    margin-right: 5px; 
    margin-bottom: 5px; 
    float:left; 
    width:10px; 
    height:10px; 
    background-color: red; 
} 

HTML:

<div class="container"> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
</div>​ 

Проверьте это в действии: http://jsfiddle.net/RP9Cg/

Я просто перечитайте свой вопрос еще раз, и я увидел, что «без изменения контейнера бит ". Если вы абсолютно ДОЛЖНЫ иметь отступы на 5 пикселей со всех сторон контейнера (не знаете, почему, может быть, вы можете сказать), вам понадобятся дополнительные стили для ваших изображений, которые являются последними в каждой строке и всех изображений в последней строке галереи. Посмотрите возможное решение: http://jsfiddle.net/T3HrJ/

Answer 2

Я все еще довольно новый для HTML & CSS себя, хотя, когда я хотел сделать это я включил

 text-align:center; 

в файле CSS для этого DIV, и это, казалось, работало. Стоит попробовать!

Answer 3

В любом цикле кода, который вы используете для создания разметки изображения, вы можете использовать оператор modulo для присвоения каждому классу класса CSS с индексированием. Затем в ваших стилях вы можете сделать что-то вроде отключения левого поля на каждом изображении в первой «колонке».

Псевдо-код для вывода контура:

for ($i=0; $i<gallerySize; $i++) { 
    echo '<img class="galleryimage gridcolumn' . ($i%5) . '" src="blahblah.gif">'; 
} 

Затем вы можете использовать правило CSS, как это изменить первый элемент в каждой строке:

img.galleryimage { margin: 5px; } 
img.gridcolumn0 { margin-left: 0px; }