Centrage fluide, galerie d'image et retour à la ligne

Bonjour,

Merci pour cette avancée, mais il me reste encore un souci :

J'ai adapté un peu le fiddle et voici ce que cela donne :
--> https://jsfiddle.net/Fluffvet/yyyqpdcd/2/

Or, ce que je souhaiterai, c'est que les blocs jaunes restent centres dans la div verte, ce qui n'est plus le cas au moment où les blocs passent à la ligne...

Une idée?

Merci
Amicalement
Modifié par Fluff (11 Jan 2016 - 16:36)

Je m'en doutais un peu (je me casse la tête depuis quelques jours à retourner le css dans tous les sens...)
Merci beaucoup pour ton aide en tous cas!

Bonjour,

Quelques remarques pour améliorer les détails :

1) ma fonction js magic() marchait mal quand on n'avait que 2 lignes de boites. Il faut remplacer

km = (z.length >> 1);

par

km = (z.length - 1);

2) peut-on se passer du flex : oui quand les éléments de la liste ont tous la même largeur et si tu ne cherches pas à remplir toute la largeur de la ligne (ce qui semble être ton cas).
3) peut-on se passer de js : oui mais à condition d'accepter d'ajouter dans le HTML autant de span vides qu'il y a d'images moins une à la fin de la liste d'images (11 images = > on ajoute 10 span vides après les images), et d'ajouter dans le css ce qui est pour l'instant ajouté par la fonction magic() en js.
4) il faut prendre des précautions concernant les éventuels espaces horizontaux entre les images (si tu ajoutes les span via js, ils n'ont pas d'espaces entre eux, et du coup si tu veux un alignement parfait verticalement de tes images, il faut que dans ton html aussi il n'y ait pas d'espaces entre tes images, sinon tu auras des problèmes pour les images de la dernière ligne dont l'alignement vertical sera légèrement impacté par l'espace occupé par les span invisibles qui les suivent).
5) il faut prendre des précautions concernant les éventuels espaces verticaux entre les lignes d'images. En effet, si tu as beaucoup d'images, tu vas ajouter des span en grand nombre après tes images. Même de hauteur nulle, comme ils peuvent remplir plusieurs lignes sous les images, pour chaque ligne invisible, on verra quand même un espace vertical de quelques pixels s'ajouter. Pour contourner ce problèmes, on peut par exemple mettre un line-heigth=0 au conteneur qui est autour de la liste d'images.

Voilà, voilà,

Amicalement,

Merci Parsimonhi

J'ai en effet réussi à me passer du js en utilisant ta solution 3). Il faut ajouter 3 spans dans mon cas. J'ai pu m'affranchir des espaces verticaux en définissant une hauteur de ligne nulle au conteneur et en réaffectant une haute de ligne à ma div d'image. Ça marche bien pour l'instant (sauf sur IE8 qui ne semble pas connaitre le selecteur css :empty (évidemment).

Merci encore!
Modifié par Fluff (17 Jan 2016 - 00:29)