Wie kann ich Text mit schwebenden Divs um unregelmäßig geformte Bilder wickeln?

So fließen Sie Text um unregelmäßig geformte Bilder

Das Umbrechen von Text um Bilder ist eine gängige Layouttechnik, aber was ist, wenn Ihr Bild das nicht ist? ein einfaches Rechteck? Können Sie dennoch einen eleganten Umhüllungseffekt erzielen?

In diesem Artikel untersuchen wir eine von Tory Lawson vorgeschlagene Methode, mit der Sie Text um unregelmäßig geformte Bilder umbrechen können, indem Sie den Bereich der Form mit schwebenden Divs blockieren.

Schritt 1: Definieren Sie den Umbruchbereich

Drehen Sie Ihr Bild auf den Kopf und zeichnen Sie eine Begrenzungslinie an der Stelle, an der der Text enden soll, und berücksichtigen Sie dabei einen kleinen Abstand, um Platz zu schaffen. Verwenden Sie ein Rastersystem, um einen gleichmäßigen Abstand zum Bildrand sicherzustellen.

Schritt 2: Erstellen Sie eine Maßliste

Messen Sie alle 10 Pixel die Breite des Umrisses und schreiben Sie Notieren Sie die x-Koordinaten auf Papier. Dies bestimmt den Abstand Ihrer blockierenden Divs.

Schritt 3: Markup und CSS erstellen

Definieren Sie ein Wrapper-Div, das das Bild und die blockierenden Divs enthält. Erstellen Sie im Wrapper Abstandshalter und legen Sie deren Breite entsprechend den Maßen fest, die Sie in Schritt 2 erfasst haben.

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

Wenn Sie diese Schritte befolgen, können Sie Text effektiv um unregelmäßige Elemente wickeln geformtes Bild, das Ihrem Design ein einzigartiges und elegantes Aussehen verleiht. Auch wenn es in CSS möglicherweise keine einfache Option zum „Textumbruch“ gibt, bietet diese Problemumgehung eine zuverlässige und ästhetisch ansprechende Lösung.

Das obige ist der detaillierte Inhalt vonWie kann ich Text mit schwebenden Divs um unregelmäßig geformte Bilder wickeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!