Float pour placer une image à côté d'un texte

Bonjour,

J'ai essayé d'utiliser un float-right pour placer une image à droite d'un texte. Ca ne fonctionne que si dans mon code, l'image est placée avant le texte. Est-ce normal ?
Le problème est que sur les petits écrans, je veux que l'image soit sous le texte, je dois donc absolument la placer après dans le code HTML.

Merci pour votre aide.

Bonjour/bonsoir

Si le texte n'a pas a s'enrouler autour de l'image , alors une base sur flex et mediaquerie iront bien .

ex :

<div>
   <img>
   <p>text</p>
</div>

avec en style de base :

div {
  display: flex;
}
div img {
  order: 1;/* order repositionne l'element dans le flux d'affichage */
}
@media screen and (max-width: 600px) {/* exemple sur un écran au plus de 600 pixels de largeur*/
  div{
    flex-direction: column;
  }
}

exemple pour jouer avec : https://codepen.io/gc-nomade/pen/xxRLMVO

tu trouveras dans la partie tutoriels des articles comme :

https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

https://www.alsacreations.com/article/lire/930-css3-media-queries.html

et https://www.alsacreations.com/article/lire/972-float-le-grand-bluff.html
Modifié par gcyrillus (21 Feb 2021 - 01:26)

Comment centrer le texte verticalement par rapport à l'image ? J'ai fait un vertical-align : middle, mais ça ne changer rien...
Merci.
Modifié par Airmaster (21 Feb 2021 - 19:03)

Airmaster a écrit :
Comment centrer le texte verticalement par rapport à l'image ? J'ai fait un vertical-align : middle, mais ça ne changer rien...
Merci.

Dans le codepen en flex en exemple donné précédemment, l'image se centre verticalement via un margin vertical en auto.

Depuis le parent(en flex) au lieu du margin, align-items:center peut être utilisé mais aura aussi un effet en horizontal lorsque le CSS(@media) passera en colonne:

1ere démo : (avec margin pour l'image) https://codepen.io/gc-nomade/pen/xxRLMVO

2eme démo avec align-items:center sans margin : https://codepen.io/gc-nomade/pen/yLVzPxb

Pour infos : float et vertical-align sont incompatibles .

dans la section tutoriel : https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html qui devrait t'éclairer sur les usages et comment fonctionne ce mode d'affichage(display).

Cdt
Modifié par gcyrillus (22 Feb 2021 - 12:12)

J'ai trouvé pour Firefox, j'ai ajouté le CSS flex-shrink: 0 et ça a résolu le problème. Je ne sais pas pourquoi mais ça marche !
Quant à IE, je laisse tomber vu le peu de personnes qui l'utilisent.