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: texte, image, puis 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 qu'il n'est pas nécessaire d'utiliser CSS pour envelopper le texte.
Cependant, ces jours-ci, le W3C recommande d'utiliser CSS au lieu de 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 elit adipiscing. 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 elit adipiscing. 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, de manière à laisser 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:
Même si j'ai inclus 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 la 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 sur le côté droit 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!