Comment enrouler du texte autour d'images de forme irrégulière à l'aide de divisions flottantes ?

Comment enrouler du texte autour d'images de forme irrégulière

Envelopper du texte autour d'images est une technique de mise en page courante, mais que se passe-t-il si votre image ne l'est pas un simple rectangle ? Pouvez-vous toujours créer un effet d'habillage élégant ?

Dans cet article, nous explorerons une méthode proposée par Tory Lawson, qui vous permet d'envelopper du texte autour d'images de forme irrégulière en bloquant la zone de la forme avec des div flottants.

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

Retournez votre image à l'envers et tracez une limite ligne où vous souhaitez que le texte se termine, en tenant compte d'un petit remplissage pour le dégagement. Utilisez un système de grille pour garantir une distance constante par rapport à la bordure de l'image.

Étape 2 : Créez une liste de mesures

Mesurez la largeur du contour tous les 10 pixels et écrivez notez les coordonnées x sur papier. Cela guidera l'espacement de vos divs bloquants.

Étape 3 : Créez le balisage et le CSS

Définissez un div wrapper pour contenir l'image et les divs bloquants. À l'intérieur du wrapper, créez des div d'espacement et définissez leurs largeurs en fonction des mesures que vous avez collectées à l'étape 2.

<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;
}

En suivant ces étapes, vous serez en mesure d'enrouler efficacement du texte autour de tout élément irrégulier. image en forme, donnant à votre design un aspect unique et raffiné. Bien qu'il n'existe peut-être pas d'option simple de « retour à la ligne » en CSS, cette solution de contournement fournit une solution fiable et esthétique.

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!