Wie kann man mithilfe von CSS und Divs Text um unregelmäßige Bilder wickeln?-CSS-Tutorial-php.cn

Wie kann man mithilfe von CSS und Divs Text um unregelmäßige Bilder wickeln?

Linda Hamilton

Freigeben： 2024-12-20 10:03:11

Original

1001 Leute haben es durchsucht

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

Wie leite ich Text um nicht rechteckige Bilder um?

Die Anpassung des Textflusses an unregelmäßige Ränder kann die visuelle Attraktivität Ihrer Website oder Anwendung verbessern. In diesem Artikel wird eine Methode untersucht, die Tory Lawson in seinem Blogbeitrag „Text um nicht rechteckige Formen umbrechen“ aus dem Jahr 2011 vorgeschlagen hat.

Schritt 1: Definieren Sie den Umbruchbereich

Mit einem Bildbearbeitungsprogramm Bestimmen Sie die gewünschte Textgrenze, indem Sie eine Begrenzungslinie zeichnen, die darstellt, wo der Text enden soll.

Schritt 2: Erstellen Sie eine Liste

Messen Sie die Breite des Umbruchbereichs in regelmäßigen Abständen (z. B. alle 10 Pixel). Notieren Sie diese Werte, um sie als Breiten der Abstandshalter zu verwenden.

Schritt 3: Markup und CSS implementieren

Markup:

<body>
  <div>

Nach dem Login kopieren

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

Nach dem Login kopieren

Diese Technik verschiebt Divs, um sie abzublocken Der Bereich der Form ermöglicht es dem Text, sich um das nicht rechteckige Bild zu wickeln und dabei einen gleichmäßigen Abstand zu seinen Rändern beizubehalten.

Fazit

Das Umschließen von Text um nicht rechteckige Bilder erfordert einen benutzerdefinierten Ansatz. Obwohl es keine direkte CSS-Lösung gibt, kann die in diesem Artikel beschriebene Methode effektiv den gewünschten Effekt erzielen.

Das obige ist der detaillierte Inhalt vonWie kann man mithilfe von CSS und Divs Text um unregelmäßige Bilder wickeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!