Comment enrouler du texte autour d'images irrégulières à l'aide de CSS et de Divs ?-tutoriel CSS-php.cn

Comment enrouler du texte autour d'images irrégulières à l'aide de CSS et de Divs ?

Linda Hamilton

Libérer： 2024-12-20 10:03:11

original

1001 Les gens l'ont consulté

How to Wrap Text Around Irregular Images Using CSS and Divs?

Comment enrouler du texte autour d'images non rectangulaires ?

La personnalisation du flux de texte pour qu'il s'enroule autour de bordures irrégulières peut améliorer l'attrait visuel de votre site Web ou de votre application. Cet article explore une méthode proposée par Tory Lawson dans son article de blog de 2011, « Envelopper du texte autour de formes non rectangulaires ».

Étape 1 : Définir la zone d'habillage

À l'aide d'un programme d'édition d'image, déterminez la limite de texte souhaitée en traçant une ligne de délimitation qui représente l'endroit où le texte doit se terminer.

Étape 2 : Créez un Liste

Mesurez la largeur de la zone d'enroulement à intervalles réguliers (par exemple, tous les 10 pixels). Enregistrez ces valeurs pour servir de largeurs aux div d'espacement.

Étape 3 : Implémenter le balisage et le CSS

Marquage :

<body>
  <div>

Copier après la connexion

CSS :

#wrapper { 
   width:634px;
   height:428px;
   display:block;
   background-image:url("headshot.jpg");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

Copier après la connexion

Cette technique fait flotter les divs vers bloquez la zone de la forme, permettant au texte de s'enrouler autour de l'image non rectangulaire tout en conservant une distance constante par rapport à ses bordures.

Conclusion

L'enroulement du texte autour d'images non rectangulaires nécessite une approche personnalisée . Bien qu'il n'existe pas de solution CSS directe, la méthode décrite dans cet article peut effectivement obtenir l'effet souhaité.

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!