Vous avez besoin du code pour enrouler le texte autour d'une image? Normalement, lorsque vous créez une page HTML, tout s'écoule linéairement, ce qui signifie un bloc directement après l'autre. Tous mes posts précédents en sont un exemple, c'est-à-dire du texte, puis de l'image, puis du texte, etc.
Parfois, vous voudrez peut-être inclure du texte à côté d'une image. C'est ce qu'on appelle le texte d'emballage autour de l'image. En fait, il est assez facile d'emballer du texte en HTML. Notez que vous n'avez pas besoin d'utiliser CSS pour faire du texte.
Cependant, ces jours-ci, le W3C recommande d'utiliser CSS au lieu de HTML pour ce genre de tâches. Je vais mentionner 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 site Web réactives.
Envelopper le texte en HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Pour faire envelopper le texte le long du côté droit de l'image, vous devez aligner l'image à gauche:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Si vous voulez que le texte apparaisse à gauche et que l'image apparaisse à l'extrême droite, changez simplement le paramètre d'alignement en "droit".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et 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.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
Voilà! Assez facile non? La seule fois où vous voudriez utiliser CSS est si vous voulez ajouter des marges aux images, de sorte 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:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
Le code ci-dessus utilise l'élément MARGIN CSS pour ajouter 10 pixels d'espaces sur le côté droit de l'image. Puisque nous avons aligné l'image à gauche, nous voulons ajouter les espaces à droite.
Fondamentalement, les quatre chiffres représentent HAUT BAS DROITE GAUCHE. Donc, si vous voulez ajouter l'espace blanc à une image alignée à droite, vous feriez ceci:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Il est donc assez simple d'utiliser HTML pour effectuer cette tâche, mais
Envelopper le texte autour de l'image en utilisant CSS
Le meilleur moyen d'entourer le texte d'une image est d'utiliser CSS. Cela vous permet de mieux contrôler le positionnement des éléments et fonctionne mieux avec les normes de codage modernes.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Même si j'ai inclus le CSS directement dans le tag image de l'exemple HTML , tu ne devrais 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 lui donnez 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:
.left {
float: left;
padding: 0 10px 0 0;}
Comme vous pouvez le voir, j'ai ajouté 10px de remplissage sur le côté droit de l'image . J'ai également utilisé la propriété float pour déplacer l'image hors du flux normal du document et la placer sur le côté gauche du conteneur parent.
Comme vous pouvez le voir, c'est beaucoup plus propre que d'ajouter tout ce code à l'étiquette 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. Profitez-en!