Beispiel:Float-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
 <title>mehrere Bilder mit float positionieren</title>
 <style>
   img {
     float: right;
     width: 10em;
     margin: 0.2em;
   }

   .clearance::after { 
     content: ""; 
     display: block; 
     clear: both; 
    }

 </style>

</head>

<body>

mehrere Bilder mit float präsentieren

   <img src="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">

Lauf an der Pegnitz
Nürnberger Tor 

   <img src="http://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">

Lauf an der Pegnitz
Brücke über die Pegnitz 

   <img src="http://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">

Lauf an der Pegnitz
Mauermühle und Judenturm

unschöne Treppenstufen

Da die Textabsätze nicht so hoch wie das rechts floatende Bild sind, richtet sich das nächste rechts schwebende Bild am vorherigen Bild und nicht wie gewünscht am rechten Rand aus.

</body> </html>

Abgerufen am 21.07.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Float-3.html"