Uniform Image Gallery Space

Question

I have a gallery of images, each of which has the same width and height, say 10 pixels. I want them spaced so that there are 5 lines, and they seem 5px apart on all sides. The div container is indented 5px. There are a few lines!

My problem is that if I give each image the left edge of 5px, then either:

a) The size of the container corresponds to the size, and therefore only 4 images fit in a row, since the fifth marker shunts it on the next line.

b) The div container has an extra 5px, which leads to an increase in the space at the end of each line.

How can I style my images so that they all match the correct line and without any ugly spaces without changing the contents of the container ?

Answer 1

You want to have a right and bottom margin in div images and above, to the left of the fill on the div container.

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

Check it out in action: http://jsfiddle.net/RP9Cg/

, " ". 5 ( , , , ), , . : http://jsfiddle.net/T3HrJ/

Answer 2

html css , , ,

        text-align:center;

css div, , , . !

Answer 3

In any code loop that you use to create image markup, you can use the modulo operator to assign each class a CSS class with column indexing. Then, in your styles, you can do something like turn off the field on the left of each image in the first "column".

Pseudocode for loop output:

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

Then you can use a CSS rule like this to change the first element on each line:

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