Espace uniformément une galerie d'images

Question

J'ai une galerie d'images, chacune ayant la même largeur et hauteur, disons 10px. Je les veux espacés de sorte qu'il y en ait 5 sur une rangée et qu'ils soient chacun à 5px, de tous les côtés. Le conteneur div a un remplissage de 5px. Il y a plusieurs rangées!

Mon problème est que si je donne chaque image une marge gauche de 5px alors:

a) Le div conteneur est dimensionné pour s'adapter et ainsi seulement 4 images s'adapter sur une ligne que la marge cinquièmes shunts-le sur la ligne suivante.

b) Le conteneur div est dimensionné avec 5px supplémentaires, ce qui entraîne un espace supplémentaire à la fin de chaque rangée.

Comment est-ce que je devrais styliser mes images de sorte qu'elles tiennent toutes sur la rangée correcte et sans n'importe quels vides sans changer le remplissage de récipients?

Answer 1

Vous souhaitez avoir une marge droite et une marge inférieure sur les divs image et un remplissage supérieur gauche sur la 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>​ 

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

Je viens de relire à nouveau votre question, et je vis de la « sans changer récipient rembourrage "bit. Si vous devez absolument avoir un remplissage de 5px sur tous les côtés du conteneur (vous ne savez pas pourquoi, peut-être vous pouvez le dire), vous aurez besoin de styles supplémentaires pour les images qui sont en dernière rangée et toutes les images dans la dernière rangée de la galerie. Découvrez une solution possible: http://jsfiddle.net/T3HrJ/

Answer 2

Je suis encore assez nouveau html & css moi-même, bien que quand je voulais faire, j'inclus

 text-align:center; 

dans le fichier css pour cette div, et qui semblait fonctionner. Ça vaut le coup d'essayer!

Answer 3

Dans toute boucle de code que vous utilisez pour générer le balisage d'image, vous pouvez utiliser un opérateur modulo pour affecter une classe CSS indexée à une colonne à chaque image. Ensuite, dans vos styles, vous pouvez faire quelque chose comme désactiver la marge de gauche sur chaque image dans la première "colonne".

pseudo-code pour la sortie de la boucle:

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

Ensuite, vous pouvez utiliser une règle CSS comme celui-ci pour changer le premier élément de chaque ligne:

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