Discussion :

[pierrot10]

Bonjour,

Je fais cette grille de vignettes ici
http://azqhbkdyv.preview.infomaniak.website/

Pour cela, j'ai fait comme ceci

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
body#page_1 div.listing{
	display:flex;
	flex-wrap: wrap;
	align-items: stretch;
}
 
body#page_1 div.listing > a{
	flex: 1 1 67px;
	box-sizing: border-box;
	padding: 5px;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div class="listing">
<a href="" title="">
	<img class="responsive" src="" alt="">
</a>
<a href="" title="">
	<img class="responsive" src="" alt="">
</a>
<a href="" title="">
	<img class="responsive" src="" alt="">
</a>
<a href="" title="">
	<img class="responsive" src="" alt="">
</a>
<a href="" title="">
	<img class="responsive" src="" alt="">
</a>
</div>

Il ya deux choses que je n'arrive pas faire.
Premièrement, j'aimerais que sur la dernière ligne, les images ne soient pas étendues sur la longueur mais qu'elle continue à etre alignée sur les mêmes colonnes. En d'autres mots, sur la dernière ligne, la sixème image doit etre dans la sixième colonne, et non pas entre les deux dernières colonnes.

Deuxièment j'aurais préféré que les images soient parfetement alignée (jutify), de manière à ce que celle de gauche soit en butée sur le bord gauche, et celle de droie, soit en butée avec le bord droit, en préservant le même espace entre les images. Actuellement, le bloque d'images est centré au milieu du container.

Je vous remercie pour vos lumières

[NoSmoking]

Bonjour,
essaie plutôt avec un modèle GRID

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
div.listing {
  --width-lien: 80px;  /*-- à ajuster --*/
  display: grid;
  grid-template-columns: repeat(auto-fill,var(--width-lien));
  gap: 1em;
  justify-content: space-between;
}
div.listing > a {
  width: var(--width-lien);
}

[pierrot10]

Super merci beaucoup!!