Maison > interface Web > tutoriel CSS > Comment puis-je faire en sorte que le texte entoure une image en utilisant HTML et CSS ?

Comment puis-je faire en sorte que le texte entoure une image en utilisant HTML et CSS ?

Susan Sarandon
Libérer: 2024-12-14 11:39:11
original
322 Les gens l'ont consulté

How Can I Make Text Wrap Around an Image Using HTML and CSS?

Enrouler du texte autour d'une image à l'aide de HTML/CSS

Question :

Pouvez-vous concevoir un bloc de texte à enrouler autour d'une image comme ceci :

[Image d'un texte s'enroulant autour d'un image]

Réponse :

Oui, c'est possible en faisant flotter l'image conteneur.

HTML :

<div>
Copier après la connexion

CSS :

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}
Copier après la connexion

Explication :

  • Le div #container définit les limites du texte et image.
  • Le div #floated contient le texte qui s'enroulera autour de l'image.
  • La propriété float: left sur le div #floated le fait flotter à gauche du conteneur.
  • La propriété width du div #floated définit la largeur du texte.

Live Exemple :

[JSFiddle](http://jsfiddle.net/kYDgL/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal