CSS Kochbuch

1.15 Bilder von Text umfließen lassen

Problem

Sie wollen links oder rechts im Text ein Bild platzieren. Der Text soll das Bild umfließen, anstatt ober- oder unterhalb davon zu erscheinen (siehe Abbildung 1-35).

Lösung

Definieren Sie die Bilder als Floats. Da die Regeln im Dokument mehr als einmal verwendet werden sollen, definieren Sie diese als Klassen-Selektoren:

.leftFloat {
 float: left
}
.rightFloat {
 float: right
}

Im nächsten Schritt weisen Sie den Bildern im HTML-Code nun die entsprechenden Klassen zu (siehe Abbildung 1-36):

<img src="csscookbook.gif" class="leftFloat" alt="titelseite" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Ut wisi enim ad minim veniam, ...