Comment puis-je faire en sorte que le texte entoure une image en HTML/CSS ?

Ajustement du texte autour des images en HTML/CSS

Question :

Pouvons-nous créer un bloc de texte qui s'enroule autour d'un image comme l'image fourni ?

Réponse :

Absolument ! Pour obtenir cet effet, il est nécessaire de faire flotter le conteneur d'images. Voici comment faire :

Code HTML :

<div>
<h3 id="Code-CSS">Code CSS :</h3>
<pre class="brush:php;toolbar:false">#container {
    width: 400px;
    background: yellow;
}

#floated {
    float: left;
    width: 150px;
    background: red;
}

Résultat :

La largeur fixe du conteneur (400px ) et un fond jaune créent un bloc de texte. L'image flottante (#floated) d'une largeur de 150px et d'un fond rouge est positionnée à gauche, permettant au texte de circuler autour d'elle.

Exemple interactif :

Une démonstration en direct de cette technique peut être trouvé sur JSFiddle : http://jsfiddle.net/kYDgL/