Habillage de texte et image

Bonjour,

Je n'arrive pas à faire un habillage de texte et images en html d'une manière que l'image soit entourée par le texte avec les espaces suffisantes entre l'image et le texte.
Merci de me renseigner.

Bien cordialement,

salut
float et margin çà devrait t'aider.
Modifié par drphilgood (26 Apr 2025 - 18:59)

Bonsoir,
Pour le coup, float ça sert vraiment à ça ; et pas au positionnement pour lequel il était question dans votre sujet précédent.

Bonjour,
donner un bout de code pourrait aider.

<p><img src="Images/Mon_image" width="384" height="394" alt="Son_nom" loading="lazy" class="img align-left"></p>

img.align-left {
	float:left;
	//C'est presque terminé, il vous reste juste à savoir comment mettre ici des marges entre le texte et l'image. Un peu de travail...
	shape-outside: circle(50%);}

shape-outside n'est pas reconnu par le validateur en html5, mais je l'utilise quand même. Il permet au texte de suivre les contours d'une image qui est ronde ou ovale. Sinon, on l'enlève tout simplement et le texte longera verticalement l'image.
Penser à mettre un paragraphe assez long, par rapport à la taille de l'image, et de la mettre à peu près au milieu du texte. Sinon, on risque d'avoir des lignes veuves ou orphelines sous l'image ou au début. Et float:right; mettra l'image à droite.
Il parait que l'on peut le faire avec grid, mais je ne connais pas.

Bongota a écrit :
Il parait que l'on peut le faire avec grid, mais je ne connais pas.

Je suis catégorique : on ne peut pas imiter ce comportement avec grid layout, ni même avec flexbox.
Grid va placer les éléments cible dans une cellule, quand à flex, chaque élément reste un bloc entier. Pour l'un comme pour l'autre on ne pourra pas faire que le texte "s'écoule" autour d'un élément.