Comment

Code html pour enrouler le texte autour de l'image

Code html pour enrouler le texte autour de l'image

Besoin du code pour enrouler le texte autour d'une image? Normalement, lorsque vous créez une page HTML, tout coule linéairement, ce qui signifie un bloc directement après l'autre. Tous mes messages précédents en sont un exemple, je.e. texte, puis image, puis texte, etc.

Parfois, vous voudrez peut-être inclure du texte à côté d'une image au lieu de ci-dessous. C'est ce qu'on appelle du texte enveloppé autour de l'image. Il est en fait assez facile d'envelopper du texte en utilisant HTML. Notez que vous n'avez pas à utiliser CSS pour envelopper du texte.

Table des matières

    Lorem ipsum Dolor Sit Amet, Consectetur adipiscing Elit. Fusce dict gravida enim, quis ultrices Mauris posuere qui. Duis adipiscing Tincidunt Sagittis. Cum sociis natoque Penatibus et magnis dis partisan montes, nastretur ridiculus mu. Aliquam a felis vitae Augue lobortis dictum. CURABITUR MOLESTIE POSUERE LAOREET. Ut Pelletesque Nunc dans Lorem Egestas Non Imperdiet Enim Congue.

    Pour que le texte enveloppe le côté droit de l'image, vous devez aligner l'image à gauche:

     
    Lorem ipsum Dolor Sit Amet, Consectetur adipiscing Elit. Fusce dict gravida enim, quis ultrices Mauris posuere qui. Duis adipiscing Tincidunt Sagittis. Cum sociis natoque Penatibus et magnis dis partisan montes, nastretur ridiculus mu. Aliquam a felis vitae Augue lobortis dictum. CURABITUR MOLESTIE POSUERE LAOREET. Ut Pelletesque Nunc dans Lorem Egestas Non Imperdiet Enim Congue.
     
     
    Même si j'ai inclus CSS directement dans la balise d'image dans l'exemple HTML, vous ne devriez vraiment plus jamais faire ça 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 attribuez simplement une classe à la balise et donnez-lui un nom. Dans mon exemple, j'ai nommé la classe gauche. Dans ma feuille de style, tout ce que j'ai à faire est d'ajouter le code suivant:
     
    .gauche float: gauche; rembourrage: 0 10px 0 0;
     
    Comme vous pouvez le voir, j'ai ajouté 10px de rembourrage sur le côté droit de l'image alignée gauche. J'ai également utilisé la propriété flottante pour déplacer l'image hors du flux normal du document et le mettre sur le côté gauche du conteneur parent.
     
    Comme vous pouvez le voir, c'est beaucoup plus propre que 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'apparence de votre page Web. Si vous avez des questions, n'hésitez pas à commenter. Apprécier!