problème affichage galerie images

Par tadrativa, il y a 2 ans

Les bases HTML/CSS

Bonjour,
Ma galerie images en affichage horizontal me pose de gros problèmes quoi que je fasse l'affichage se met en vertical. Les problèmes persistent quel que soit le thème utilisé y compris par celui par défaut, plugins désactivés, Wordpress à jour, aucun conflit de CSS puisque je pars de zéro et n'ai pas modifié le CSS du thème choisi. Je comprends d'autant moins que j'ai testé la galerie d'images avec mon thème en utilisant Wordpress en mode local et que là tout est nickel.
Je ne sais plus où chercher pour régler le problème.
Merci par avance pour votre aide.

".gallery { display: flex; flex-direction: column; margin-left: 20px; /* Ajoutez la marge à gauche */ margin-top: 25px; } .row { display: flex; flex-wrap: wrap; margin-left: -40px; /* Compenser la marge ajoutée à .gallery */ } figure { flex: 1 1 auto; /* Les images s'adapteront en largeur */ margin: 0 18px 0 0; /* Espacement entre les images */ position: relative; } figcaption { text-align: left; }" "<section class="gallery"> <div class="row"> <figure> <a href="https://example.com/image1.jpg"> <img src="https://example.com/image1.jpg"> </a> <figcaption> <p>Légende image 1</p> </figcaption> </figure> <figure> <a href="https://example.com/image2.jpg"> <img src="https://example.com/image2.jpg"> </a> <figcaption> <p>Légende image 2</p> </figcaption> </figure> <figure> <a href="https://example.com/image3.jpg"> <img src="https://example.com/image3.jpg"> </a> <figcaption> <p>Légende image 3</p> </figcaption> </figure> </section>"

2 réponses

gena, il y a 2 ans

Bonjour, ton code est bon que se sois html qui est biens tructurer les propriété css aussi, j'ai donc remarqué que tu t'étais ismplmene tromper de class:

tu dois mettre ton flex column dans row car en le mettantdazsn gallery celui ci ne fasi quela colonne de son enfantqui est juste 1 div, alors que dans row ses enfant sont tes 3 figures auquel s'applique donc ta column.

Petit conseil n'hesite pas a mettre des background color a tes class afin de voir ou ellesesitue et qu'est se qu'elle enveloppe ;)
.row {
flex-direction: column;
display: flex;
flex-wrap: wrap;
margin-left: -40px;
/ Compenser la marge ajoutée à .gallery /
}

gena, il y a 2 ans

de rien desolé pour les nombreuses faute de frappe par manque de temps pour t'aider :(