CSS enveloppe le texte autour de l'image

Le texte enveloppe est lorsque nous ajustez le texte autour de n'importe quel élément. Nous discuterons de l'emballage du texte autour de l'image dans CSS où nous ajusterons le texte autour de l'image en utilisant la propriété CSS. Envelopper le texte autour d'une image est un excellent moyen de rendre n'importe quel site Web plus attrayant. L'image peut maintenant être dans une variété de formes, y compris la forme carrée fondamentale. Envelopper une image avec du texte est réalisable en utilisant HTML et CSS. Dans cet article, nous fournirons le détail complet de l'enveloppement du texte autour d'une image dans CSS. Nous allons vous montrer à quoi l'image a l'air après enrouler le texte autour de lui.

Exemple 1:

Nous allons commencer à écrire du code correctement et l'exécuter dans le code Visual Studio. Pour commencer, nous créons un nouveau fichier et choisissons HTML comme langue. Maintenant, mettez "!"Et appuyez sur la touche" Entrée ". Toutes les balises HTML nécessaires peuvent être affichées ici. Nous n'aurons pas à écrire toutes ces balises. Après cela, nous utilisons simplement la balise «lien» dans la «tête» pour insérer le nom du fichier CSS que nous voulons lier avec ce fichier HTML. Dans ce code, nous avons d'abord mis le titre puis un div avec le nom «carré». À l'intérieur de cette div «carrée», nous avons une autre div dans laquelle nous insérons l'image en utilisant la balise «IMG».

Après avoir mis l'image dans la deuxième div, fermez cette div et généré un paragraphe en dessous de cette div. Lorsque nous terminons ce paragraphe et le fermons. Ensuite, nous fermons la première balise «div». Nous allons envelopper ce texte autour de cette image que nous avons insérée. Pour l'emballage du texte, nous irons au fichier CSS, où nous utiliserons la propriété «flottante» pour envelopper le texte.

Tout d'abord, nous devons mettre la «marge» du corps à «20px» et également aligner tout le corps au «centre». Le titre «H1» est également décoré en utilisant «violet» comme «couleur» de cette rubrique. Nous utilisons la «Font-Family» et l'ajustez à «Algérien». Ensuite, nous utilisons la propriété «flottante» pour l'image que nous avons insérée dans le code HTML. Et définir cette valeur de propriété «flottante» sur «gauche», comme pour que l'image se déplace vers le côté gauche. Nous ajustons également la «marge» de l'image en «4px». La «largeur» et la «hauteur» de cette image sont «250px». Nous avons également un paragraphe, nous définissons donc également ce paragraphe. Nous alignons le texte du paragraphe et le définissons sur «justifier». Nous définissons la «taille de police» de ce paragraphe et l'ajusté à «20px». La «Font-Family» de ce paragraphe est «Calibri».

Vous trouverez ci-dessous la capture d'écran du code ci-dessus et vous verrez que l'image flotte sur le côté gauche et le texte est enveloppé sur cette image sur le côté droit. Nous enroulons le texte du paragraphe autour de cette image en utilisant la propriété «flottante» dans CSS.

Exemple n ° 2:

Nous utilisons le code HTML de l'exemple ci-dessus pour cet exemple, mais cette fois, nous définirons l'image sur le côté droit en utilisant la propriété «flottante». Dans ce code CSS, nous définissons la marge du corps sur «20px» et la propriété «Text-Align» est ajustée au «centre». La «couleur» est «vert» pour le titre et la «famille de police» est «algérienne». Utilisez également «texto-decoration» et placez «sous-traits» comme valeur de cette propriété. Nous flottons l'image vers la «droite» afin que le texte du paragraphe apparaisse sur le côté gauche de cette image. La «marge» du «IMG» est «5px».

Nous avons également réglé la «largeur» sur «190px» et la «hauteur» est «90px». En dessous, nous utilisons la propriété «Text-Align» pour le «P» et ce «P» décrit le paragraphe. Nous définissons la propriété «Text-Align» sur le mot-clé «Justify» et la «taille de police» pour cela est définie sur «18px». Le «Times New Roman» est utilisé comme «Font-Family».

Vous pouvez voir dans la capture d'écran ci-dessous que l'image apparaît sur le côté droit en raison de la propriété «flottante» et que le texte est enroulé autour de cette image.

Exemple # 3:

Nous allons utiliser deux images différentes ici. Nous mettons la première image à l'intérieur de la div, puis nous plaçons un paragraphe. Après ce paragraphe, nous insérons à nouveau une image à l'intérieur d'une autre div et ajoutons à nouveau un paragraphe sous cette image. Nous allons ajuster le texte autour des deux images dans le code CSS. Regardez comment nous allons enrouler le texte autour des deux images dans CSS ci-dessous.

La «marge» et la propriété «Text-Align» pour le corps sont les mêmes que nous avons utilisées dans les exemples ci-dessus. La «couleur» est changée en «rouge» cette fois pour le titre. La «Font-Family» est sélectionnée comme «algérien» et aussi «souligner» cette rubrique. Nous définissons la propriété «Float» pour la première image en mentionnant le nom de la première classe d'image et en définissant la propriété «Float» sur la «droite». La «marge» que nous utilisons pour la première image est «5px». Nous utilisons également la propriété «largeur» et «hauteur» et fixons les deux sur «200px».

Ensuite, nous ajustons également la deuxième image et «flottons» cette deuxième image à la «gauche» et sa «marge» est la même que nous avons définie pour la première image. Maintenant, nous «justifions» ce paragraphe et avons mis sa «taille de police» à «17px». "Arial" est utilisé comme "Font-Family" pour "P".

Deux images sont rendues dans la sortie. La première image est rendue du côté «gauche» et la deuxième image est rendue du côté «droit» de l'écran de sortie et tout le texte est enroulé autour des deux images.

Exemple n ° 4:

Dans notre dernier exemple, nous avons mis un paragraphe puis un div. À l'intérieur de ce conteneur div, nous insérons également une image et un paragraphe. Maintenant, regardez comment nous utilisons tous ces paragraphes et ajustez l'image et enroulez également le texte autour de l'image.

Nous utilisons les valeurs «marge» et «centre» «20px» et «centre» pour «Text-Align» pour le corps. Ensuite, nous avons réglé la couleur sur «Maroon» pour le titre et la police, la police «algérienne». Nous «soulignons» également le titre. Nous définissons la propriété «flottante» pour l'image en spécifiant le nom de la classe d'image et en définissant la propriété «Float» sur «gauche». Pour cette image, la «marge» que nous utilisons est «5px». La «largeur» de cette image est «300px» et sa «hauteur» est «300px».

Maintenant, nous appliquons certaines propriétés au paragraphe pour le rendre plus attrayant. Nous définissons la «couleur» du texte du paragraphe sur «noir». Nous avons également défini la propriété Align du texte pour «justifier» et réglé «18px» pour la «taille de police». Nous ajustons également le «Times New Roman» «Font-Family» pour le paragraphe.

Vous pouvez remarquer qu'il y a un paragraphe au-dessus de l'image, un paragraphe sous l'image, un texte de paragraphe sur le côté droit de l'image, et l'image flotte sur le côté gauche. Le texte du paragraphe s'enroule autour de cette image parce que nous le définissons dans le code CSS.

Conclusion

L'objectif de cet article est de vous expliquer comment enrouler le texte autour de l'image dans CSS. Nous avons étudié ce concept en profondeur dans cet article et expliqué ce qui embrasse le texte et ce que nous devons faire pour envelopper le texte autour de l'image. Nous avons utilisé la propriété «flottante» pour flotter l'image à «gauche» ou «droite» et envelopper le texte autour de cette image. Nous avons également inclus plusieurs exemples ici dans lesquels nous avons enveloppé le texte autour de l'image, y compris les résultats de tous les exemples de l'article. J'espère que vous aurez une assez bonne compréhension du texte d'enveloppement autour du concept d'image dans CSS après avoir lu cet article et appliqué ces exemples en pratique par vous-même.