Comment pouvons-nous obtenir un habillage de texte autour d'images irrégulières à l'aide de Divs et CSS ?

Ajustement du texte autour d'images irrégulières

Dans le paysage actuel de la conception Web, il est de plus en plus courant de rencontrer des images non rectangulaires, telles que des cartes de pays ou des graphiques vectoriels complexes. L'impact visuel de ces images peut être amélioré en enroulant du texte autour d'elles, mais cela pose un défi unique : comment le texte peut-il circuler naturellement tout en maintenant une distance constante par rapport à la bordure irrégulière de l'image ?

Plongées flottantes vers Définir la zone d'habillage

Une solution créative à ce problème a été proposée par Tory Lawson dans son article de blog de 2011, "Envelopper le texte autour formes non rectangulaires. La méthode de Lawson consiste à créer une série de divs qui flottent à côté de la forme et bloquent la zone où le texte s'enroulera.

Mesurer et diviser la forme

Pour Pour définir la zone de retour à la ligne, un logiciel d'édition d'image tel que Fireworks est utilisé pour poser une grille au-dessus de l'image et tracer une ligne de délimitation autour de la limite de texte souhaitée. La largeur de cette ligne est ensuite mesurée et divisée en intervalles égaux (par exemple tous les 10 pixels).

Création des Divs

Une fois les mesures déterminées, un HTML list est utilisé pour créer une série de divs. Chaque div représente un intervalle vertical dans la zone d'habillage et flotte vers la droite, créant un effet « bloqueur » qui empêche le texte de circuler sur la forme.

Style CSS

La dernière étape consiste à appliquer des styles CSS aux divs et au texte. Le div wrapper se voit attribuer une largeur et une hauteur qui englobent l’intégralité de l’image, et la propriété background-image est définie sur l’image de la forme. Les divisions d'espacement se voient attribuer une hauteur correspondant aux mesures d'intervalle et flottent vers la droite pour créer l'effet de blocage. Enfin, le texte est stylisé avec un affichage en ligne et une couleur pour le rendre visible sur l'image.

Exemple de code

<div>

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

Conclusion

Bien qu'il n'existe peut-être pas de solution CSS simple pour enrouler du texte autour de formes irrégulières, la méthode de Lawson fournit une approche viable. En mesurant soigneusement la forme et en créant des divs pour bloquer la zone d'enroulement, il est possible d'obtenir un résultat visuellement attrayant où le texte coule naturellement et maintient une distance constante par rapport à la bordure de la forme.

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!