Positionner les image <figure>

<figure> à l'horizontale

Le problème exposé dans ce sujet a été résolu.

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 :)

+0 -0

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;
}
 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

+0 -0

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*/
}
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

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