Mit den CSS-Float-Eigenschaften können Sie jedes Bild rechts von jedem Text verschieben, wie Sie es mit dem Bild rechts neben diesem Text sehen können. Führen Sie dazu auf Ihrer Webseite die folgenden Schritte aus.

In diesem Beispiel verwenden wir eine externe CSS-Datei. Mithilfe einer externen CSS-Datei können Sie auf jeder Seite ein Floating-Bild erstellen, das einen Link zur CSS-Datei enthält. Externe CSS-Dateien erleichtern auch das Ändern von Einstellungen, die Sie möglicherweise später anpassen möchten.

1. Erstellen Sie eine CSS-Datei. Wenn Sie bereits eine CSS-Datei für Ihre Webseite haben, bearbeiten Sie Ihre CSS-Datei und fügen Sie den folgenden Code hinzu.

2. Fügen Sie der CSS-Datei den folgenden Code hinzu.

 .floatRight {float: right; Rand links: 20px} 

Tipp: Durch Hinzufügen von Float: Left wird das Bild auf der linken Seite des Texts verschoben.

Wenn Sie mehr als ein Bild auf der rechten Seite verschieben möchten, fügen Sie der CSS-Datei die folgende Zeile hinzu.

 .floatRightClear {float: right; clear: right; margin-left: 20px} 

3. Nachdem der obige Code erstellt wurde, speichern Sie die CSS-Datei und rufen Sie sie von jeder HTML-Seite aus mit einem Code auf, der dem unten stehenden Beispiel ähnelt. In unserem Beispiel haben wir die CSS-Datei style.css benannt.

4. Fügen Sie schließlich das Bild hinzu, das Sie auf der rechten Seite des Containers schweben möchten.