Tableau html et css : des lignes qui s'adaptent

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour, Je tente de réaliser une galerie d’image où les images apparaissent en mosaique, comme les sites Unsplash ou Pinterest peuvent afficher. J’essaie d’adapter le plugin "Gallery" de Dokuwiki pour avoir un effet similaire.

Les images sont dans un tableau. En bidouillant le css, j’arrive à approcher du rendu que je cherche : mes images font toutes la même largeur mais ont des hauteurs différentes.

Mon souci, c’est que la hauteur de chaque ligne du tableau est actuellement déterminée par l’image la plus haute, donc certaines images (moins hautes et sur la même ligne) ont un grand vide au dessus/en dessous. Ce que j’aimerais, c’est que ça s’organise par colonne, les images les unes à la suite des autres dans la colonne, et donc qu’on ne voit plus les lignes et que l’effet "mosaique" soit là, chaque image séparée des autres (au dessus, au dessous, sur les côté) par un petit vide qui fait toujours la même taille.

Est-ce que le tableau me permet de faire ça, ou est-ce qu’il faut que je parte sur une autre logique ? Mes tests "de zéro" ne sont pas des plus concluants non plus… C’est la première fois que j’utilise les fonctions de tableau en html et je ne suis pas certaine des possibilités.

+0 -0

Tu veux faire un truc de ce genre : https://masonry.desandro.com/ ?

N’utilise pas de tableaux. Les tableaux c’est exclusivement pour les données tabulaires, genre un tableau excel. Si tu veux un quadrillage, donc avec des lignes et colonnes, mais sans vide, regarde ici : https://twitter.com/wesbos/status/977223833206829056

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+2 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte