Galerie d'images, paragraphes et images décalées:(((((

Salut à tous,

Je construis une galerie d'images basée sur ce tutoriel :

http://designshack.net/articles/css/how-to-build-a-responsive-thumbnail-gallery/

Et en fait je me suis rendu compte que si les paragraphes servant à la description des images sont de longueur différentes et pas sur le même nombre de lignes, les images de la seconde ligne ont un comportement bizarre et sont décalées.



D'où vient ce phénomène et comment l'éviter ?

Merki

Bonjour,

ryosan a écrit :
D'où vient ce phénomène

Conséquence logique de l'utilisation de float.

ryosan a écrit :
comment l'éviter ?

En utilisant plutôt display:inline-block.

bonjour,

merci pour la réponse, effectivement la propriété inline-block corrige le problème, avec la nuance que les images ne sont ensuite plus alignées horizontalement, leur placement dépendant de la "hauteur" du paragraphe

je vais paraître has-been mais pourquoi se casser la tête à refaire ce que fait si bien un tableau par de la gestion fine des css?

kustolovic a écrit :
je vais paraître has-been mais pourquoi se casser la tête à refaire ce que fait si bien un tableau par de la gestion fine des css?

Limites d'un tableau:
- Bla bla sémantique bla bla.
- Il faut choisir le nombre de colonnes.
- Ça ne s'adapte pas à une largeur variable.
- C'est très problématique pour du responsive design.

Bienvenue en 2012.

ryosan a écrit :
les images ne sont ensuite plus alignées horizontalement

En effet, la valeur par défaut de vertical-align est "baseline". Rien ne t'empêche de la passer à "top" si tu veux que le haut des images soit aligné.