Besoin du code pour envelopper le texte autour d'une image? Normalement, lorsque vous créez une page HTML, tout se déroule de manière linéaire, ce qui signifie un bloc directement après un autre. Tous mes articles précédents en sont un exemple, c’est-à-dire le texte, puis l’image, puis le texte, etc.
Parfois, vous souhaiterez peut-être inclure du texte à côté d'une image plutôt qu'en dessous. Cela s'appelle envelopper le texte autour de l'image. En fait, il est assez facile d’envelopper du texte en HTML. Notez que vous n'avez pas besoin d'utiliser CSS pour envelopper du texte.
Cependant, ces jours-ci, le W3C recommande d'utiliser CSS plutôt que HTML pour ce type de tâches. Je mentionnerai les deux méthodes ci-dessous, mais si vous le pouvez, il est préférable d'utiliser CSS, car il est plus adaptable aux conceptions de sites Web réactifs.
Enrouler le texte autour de l'image en utilisant HTML
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus and magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
Pour que le texte soit placé à droite de l'image, vous devez aligner l'image à gauche:
Votre texte va ici.
Si vous souhaitez que le texte apparaisse à gauche et que l'image apparaisse à l'extrême droite, il suffit de changer le paramètre d'alignement sur «right».
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus and magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
Votre texte va ici.
C'est tout! Assez facile non? Le seul moment où vous voudriez utiliser CSS est si vous souhaitez ajouter des marges aux images, afin qu'il y ait un peu d'espace entre le texte et l'image.
Vous pouvez ajouter des marges à une image en utilisant le code de style CSS suivant:
Votre texte va ici.
Le code ci-dessus utilise l'élément CSS MARGIN pour ajouter 10 pixels d'espaces sur le côté droit de l'image. Puisque nous avons aligné l'image à gauche, nous souhaitons ajouter un espace à droite.
Fondamentalement, les quatre chiffres représentent en haut à droite, en bas à gauche. Donc, si vous souhaitez ajouter un espace blanc à une image alignée à droite, procédez comme suit:
Votre texte va ici.
Il est donc assez simple d'utiliser HTML pour effectuer cette tâche, mais encore une fois, cela peut ne pas fonctionner correctement pour les sites réactifs.
Envelopper le texte autour de l'image à l'aide de CSS
Le meilleur moyen d’envelopper du texte autour d’une image est d’utiliser CSS. Cela vous donne un contrôle plus fin du grain sur le positionnement des éléments et fonctionne mieux avec les normes de codage modernes.
Même si j'ai inclus le CSS directement dans la balise image dans l'exemple HTML, vous ne devriez plus jamais le faire non plus. Au lieu de cela, vous devriez avoir un fichier séparé appelé une feuille de style qui contient tout votre code CSS.
Dans la balise IMG, vous assignez simplement une classe à la balise et lui donnez un nom. Dans mon exemple, j'ai nommé la classe de gauche . Dans ma feuille de style, tout ce que j'ai à faire est d'ajouter le code suivant:
.left {float: left; remplissage: 0 10px 0 0;} Comme vous pouvez le constater, j'ai ajouté 10 pixels de remplissage à droite de l'image alignée à gauche. J'ai également utilisé la propriété float pour déplacer l'image hors du flux normal du document et la placer à gauche du conteneur parent.
Comme vous pouvez le constater, il est bien plus simple d’ajouter tout ce code à la balise IMG elle-même. Il est également plus facile à gérer et vous pouvez utiliser beaucoup plus de propriétés CSS pour personnaliser l'aspect de votre page Web. Si vous avez des questions, n'hésitez pas à commenter. Prendre plaisir!
