[CSS/HTML] Afficher une image à côté d’un texte

vendredi 20 octobre 2017

Nous allons voir ici comment facilement intégrer du texte avec une image à gauche ou à droite du texte pour du contenu HTML

Toujours d’abord faire un p avec l’image ensuite un p avec le texte.

Pour aligner une image à droite par rapport à un texte, il suffit de faire un float:right.

Pour aligner une image à gauche par rapport à un texte, un float:left.

Si jamais votre contenu texte ne dépasse pas la hauteur de votre image il faut faire un clear:both après.

Exemple de texte pas assez long:

<p style="float:right"><img src="/sites/default/files/images/xxxx.jpg" /></p>
<p>blablablablablabla</p>
<div style="clear:both"></div>

Si le texte est assez long:

<p style="float:right"><img src="/sites/default/files/images/xxx.jpg" /></p>
<p>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>
<p>blabla</p>