Heim >Web-Frontend >CSS-Tutorial >Wie kann man mithilfe von CSS und Divs Text um unregelmäßige Bilder wickeln?
Wie kann man mithilfe von CSS und Divs Text um unregelmäßige Bilder wickeln?
- Linda HamiltonOriginal
- 2024-12-20 10:03:111007Durchsuche
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>
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;
}
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!