Erfahren Sie, wie Sie mit CSS Text um ein schwebendes Bild umbrechen.
Verwenden Sie eine CSS-Regel wie diese, um Ihren Text um das Bild auf der rechten Seite zu umbrechen, ähnlich wie auf dem Foto, das diesen Artikel einführt:
Die Regel float: left bewirkt, dass das Bild an den linken Rand verschoben wird. Die Abstandsregel verhindert, dass der Text direkt gegen die rechte Seite des Bildes stößt. Wenn diesem Bild ein Rahmen hinzugefügt wurde, würde zwischen dem Bild und dem Rahmen eine Auffüllung erfolgen. Siehe Abschnitt 2, um mit einem Bild mit Rahmen zu arbeiten.
Fügen Sie als Nächstes links und rechts des Bildes Ränder hinzu, um es zu zentrieren. Der richtige Wert für den linken und rechten Rand, um alles zu zentrieren, ist auto.
Um eine dicke, rahmenartige Umrandung mit dem Rillenrandstil zu erstellen, kann eine Regel wie diese verwendet werden:
Andere Bordürenstile sind einfarbig, gepunktet, gestrichelt, doppelt, Ridge, Einsatz und Anfang. Die Breite kann in Pixel, Ems oder Prozent angegeben werden.
Rahmen können wahlweise oben, rechts, unten und links des Bildes angewendet werden. Sie können dieses Wissen nutzen, um einen Effekt wie einen Schlagschatten zu erzeugen.
Wenn Sie einen durchgehenden Rahmen in 2 Graustufen nur am rechten und unteren Rand verwenden, erhalten Sie einen Schlagschatteneffekt.
img { float: links; Rahmen-rechts-Stil: solide; Rahmen-rechts-Breite: 8px; Rahmen-rechts-Farbe: #CCCCCC; Rahmen-unten-Stil: solide; Rahmen-unten-Breite: 8px; Rahmenfarbe unten: #999999; Rand-rechts: 1em; Rand-unten: 1em; }
Spitze
Wenn Sie Bilder in mehr als einem Abschnitt (div) einer Seite haben, verwenden Sie Nachkommenselektoren, um sie individuell zu gestalten. Mögliche Selektoren: #content img, #sidebar img, #feature img.
