Inline-block avec marge en trop
Bonjour,
Je souhaite afficher une liste d'objet (par exemple des photos) côte à côte afin que ça remplisse la largeur puis que ça passe à la ligne.
Float permet de faire ça mais je préfère utiliser Inline-block avec le code suivant :
Code:
1
2
3
4
5
6
7
| .Photo {
display : inline-block;
vertical-align : top;
margin : 8px;
border : solid 1px black;
width : 80px;
} |
De cette manière, chaque photos s'affiche à côté de la précédente et quand elles n'ont plus la place elles continuent en-dessous.
Là où le problème se pose, c'est que suivant les dimensions du conteneur, la marge droite d'un l'élément ne lui permet pas de se positionner à la droite de son prédécesseur mais en-dessous, ce qui graphiquement pose un problème puisque ça donne l'impression qu'il peut rentrer.
Concrètement, si le conteneur fait 395px, et que chaque photo prend 100 pixels (exemple ci-dessus), il n'en rentre que 3 alors que si le quatrième élément n'avait pas de marge droite, il en rentrerait 4.
On peut corriger ce problème si on connait d'avance la dimension du conteneur mais je ne trouve pas de solutions si le conteneur est dynamique.
J'ai également essayé d'utiliser la propriété table-cell de cette manière :
Code:
1
2
3
4
5
6
7
8
9
10
| .Conteneur {
display : table;
border-collapse : separate;
border-spacing : 10px;
}
.Photo {
display : table-cell;
width : 80px;
} |
Mais le problème est exactement le même.
Une autre solutions est aussi de mettre qu'une marge a gauche et pas à droite mais du coup l'alignement à gauche est décalé.
Je vous remercie d'avance pour votre aide si vous avez une solution.
Je précise que je suis un utilisateur avancé de CSS et qu'on ne sait pas d'avance le nombre d'éléments qu'il y aura par ligne.
Des éléments de réponses serait de réussir à sélectionner des éléments frères sans retour à la ligne entre les deux ou que le tests de largeur pour le passage à la ligne se fasse sans les marges mais je ne trouve rien en CSS pour faire ce genre de choses.
