Positionner un logo à droite d'une div

Bonjour,

j'essaye de reproduire à l'identique cette page

https://nicepage.com/fr/css-templates/preview/developpement-a-grande-echelle-1246832?device=desktop

je souhaiterais positionner les logos à droite de leur conteneur j'ai essayé flex wrap mais ca ne fonctionne pas
Pourriez vous me donner un coup de main ? merci par avance

 <h1>Réfléchi, collaboratif et perspicace</h1>
<div class="conteneur">
    <div class="immeuble">
       <img src="icon1.png" alt="logo" class="logo1">
    <h2> Immeuble </h2>
    
    <p>Lorem ipsum dolor sit </p>
    <form>
    <a href="#">
        <input type="button" value="suite">
    </a>
</form>
</div>
<div class="industriel">
    <img src="icon2.png" alt="logo" class="logo2">
    <h2> Industriel </h2>
    
    <p>Lorem ipsum dolor sit </p>
    <form>

    <a href="#">
        <input type="button" value="suite">
    </a>
</form>
</div>
<div class="futur">
    <img src="icon3.png" alt="logo" class="logo3">
    <h2> Futur </h2>
    
    <p>Lorem ipsum dolor sit </p>
    <form>
    <a href="#">
        <input type="button" value="suite">
    </a>
</form>
</div>

Bonjour,

Le plus simple serait de déplacer les balises img affichant le logo en fin de leur conteneur dans le html.

Ou alors on peut les laisser au début et leur donner la propriété css float:right.

Ou encore on peut mettre les conteneurs "immeuble", "industriel", "futur" etc. en display:flex, et ensuite changer l'ordre dans lequel s'affichent les éléments qu'ils contiennent avec la propriété css "order" appliqués à ces éléments.

Ou encore on peut mettre les conteneurs "immeuble", "industriel", "futur" etc. en display:grid et positionner chaque élément qu'ils contiennent avec les propriétés css grid-row et grid-column.

Ou encore on peut mettre les conteneurs "immeuble", "industriel", "futur" etc. en position:relative et les balises img en position:absolute avec right:0.

Amicalement,

Hello Rach26,

Pour compléter les explications à parsimonhi, je rajouterai que lors de la construction du CSS, attribuer 1 couleur background à l'élément, facilite la visualisation.
Tu les supprimes lorsque tu n'en a plus besoin.

Ex =>

.futur{ background: #ffffff; }
.industriel{ background: #da6de4; }

Modifié par gesualda (31 Jan 2022 - 10:24)