5549 sujets

Sémantique web et HTML

salut a tous
voilà j'ai 1 grande image et au dessous j'en ai 3 autres. je voudrai faire un alignement de mes 3 images qui va prendre toute la largeur de ma première image.

--------------------------------------




-------------------------------------
---------- ---------- ----------

voilà j'ai fait un mini mini exemple.
moi ce que j'ai c'est ca.
----------------------------------------------




----------------------------------------------
---------- ---------- ----------
Salut, tu devrais te renseigner sur les flexbox (:


<div id="container">
    <img alt="" src="image.png">
    <img alt="" src="image.png">
    <img alt="" src="image.png">
</div>


#container {
    width: 100vw /* toute la largeur de ta page */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
Bonjour,
justement j'ai utilisé les flex box finalement ca a marché mais quand je rétrécisse la fenetre les images ne descendant pas, en utilisant flex-wrap:wrap;
voila mon code et mon css.

<!-- page modèle article -->
<section>
<div class="content-article">
<div class="content-left">
<div class="image">
<img src="res/image/image1.jpg">
<div class="flex-image">
<img src="res/image/image2.jpg">
<img src="res/image/image3.jpg">
<img src="res/image/image4.jpg">
</div>
</div>
</div>
<div class="content-right">
<h6>Blouse avec liens à nouer</h6>
<!--rajouter un trait-->
<div class="avis">
<ul class="flex-avis">
<li class="envie"> Lire les avis</li>
<li class="envie"> Donner votre avis</li>
<li class="envie"> Listes d'envie </li>
</ul>
</div>

css

.content-article{
display: flex;
flex-direction: row;
}
.content-article{
}
.flex-image{
justify-content:space-around;
}
.content-left{
width: 50%;
background-color: grey;
}
.content-right{
width: 50%;
display: flex;
flex-direction:column;
}

possible de m'aider ?
Tu peux utiliser des media queries :


@media only screen and (max-width: 300px) {
.content-article {
    flex-direction: column;
}
Modérateur
Bonjour,

Le problème est que les images ne sont pas ici directement enfant du conteneur qui a le display:flex (dans l'exemple donné par zelma).

Il faudrait par exemple ajouter display:flex et flex-wrap:wrap pour .flex-image dans le css.

Amicalement,
Meilleure solution