Textumfluss bei Bildern erstellen[IE|M|O|G]

von: Werner Zenk

Textumfluss bei Bildern mit CSS erstellen.
Sie können für Bilder oder ein Element bestimmen, dass nachfolgende Elemente dieses Element umfließen.

• Text umfließen lassen

Demo: (Textumfluss rechts)

Lorem ipsum dolor sit amet Orci Cras metus sagittis lorem Quisque interdum magna malesuada ac tortor Vestibulum pharetra hendrerit mattis auctor mi semper consequat elit augue tortor tellus consectetuer pretium pretium nulla faucibus quis Aliquam Nulla tincidunt consequat elit commodo sit quis facilisi facilisi tincidunt laoreet Vestibulum id tincidunt lobortis Nam cursus Phasellus Aenean pretium.

Quelltext:

<img src="bild.jpg" style="float: left;">
 Lorem ipsum dolor ...

Der Text ist jetzt direkt an das Bild angeheftet, möchte man einen Abstand zwischen Text und Bild haben, fügt man einfach margin: 10px hinzu.

Demo:

<img src="bild.jpg" style="float: left; margin: 10px;">
 Lorem ipsum dolor ...

Wenn der Textumfluss beendet werden soll, so fügt man
<br style="clear: both;"> hinzu. Dieses bewirkt das nachfolgender Text unterhalb des Bildes fortgesetzt wird.

Demo: (Textumfluss links)

<img src="bild.jpg" style="float: right;">
 Lorem ipsum dolor ...

• Bilder umfließen lassen

Demo:

Quelltext:

<img src="bild.jpg" style="float: left; margin-right: 10px;"> <br>
 <img src="klein1.jpg"> <br>
 <img src="klein2.jpg"> <br>
 <img src="klein3.jpg">
<br style="clear: both;">

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Textmarker-Effekte

Beim Textfeld fokussieren die Hintergrundfarbe wechseln

CSS Hyperlink #28

Eingabefeld mit Linie

CSS Hyperlink #31

Fehler in CSS - Fehler in CSS erkennen und validieren.

Abkürzungen mit CSS hervorheben …mehr