Positionner les image <figure>

Bonjour

Je suis bloqué

Comment positionner des images <figure> en position horizontale svp?

Celles-ci se positionnent en position verticale par defaut..

J'ai placé trois images dans un <figure class=""> dont j'ai defini des dimentions horizontale dans CSS.

width: 900px;

height: 250px;

En verifiant avec "inspect element" dans Google je constate que ces dimensions sont bien entrées en vigueur

sur mon site.

Les figures restent a la verticale malgré tout.

Merci

Comment positionner des images <figure> en position horizontale svp?

Celles-ci se positionnent en position verticale par defaut..

c'est à dire? elles se mettent les unes en dessous des autres? le mieux est sûrement de mettre la règle CSS:

1
2
3

figure img{
   display: inline-block;
}

Merci pour ta reponse

Oui. Mes trois images se positionnent l'une au dessus de l'autre.

Ce bout de code ne resout pas le probleme..

peux-tu nous donner le code CSS que tu appliques à tes images et à tes figures stp?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<div class="droite">

<figure class="f_f_D">

<img src="r-e-p-img/E_F_D.jpg">

<figcaption>un texte</figcaption>

<img src="r-e-p-img/E_C.jpg">

<figcaption>du texte</figcaption>

<img src="r-e-p-img/E_P_D_L_F_D_V.jpg">

<figcaption>texte.</figcaption>

</figure>

</div>

Le CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.f_f_D{

    display: inline-block;

    height: 200px;

    width: 900px;

}   

figure img{

   display: inline-block;

}

EDIT En mettant les images dans des balises <figure> séparées et en retirant tout le reste comme le div "droite" ca fonctionne.

Merci.

Edit by artragis: mise en forme des codes

Salut,

en effet, si tu as trois figures différentes (comme le montre le fait que tu as 3 figcaption) il faut faire trois balises figure.

artragis

Est il possible de faire en sorte que le positionnement cote a cote ne s'applique pas a toutes les figures? Genre en ajoutant un ID à

figure img?

oui, soit en ajoutant un id, soit en ajoutant un pseudo sélecteur. Imaginons que tu veuilles toujours faire "deux images côte à côte puis la troisième centrée" tu peux faire :

1
2
3
4
5
6

figure:nth-of-type(3n), figure:nth-of-type(3n+1){
/* côte à côte*/
}
figure:nth-of-type(3n+2){
/*seule, centrée*/
}