Beispiel:Float-4.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" type="text/css" media="screen" href="./Beispiel:Grundlayout.css" />
 <title>mehrere Bilder mit float positionieren</title>
 <style>
   img {
     float: right;
     width: 225px;
     margin: 0.2em;
   }

   p:after { 
     content: ""; 
     display: block; 
     clear: both; 
    }

 </style>

</head>

<body>

mehrere Bilder mit float präsentieren

 <main>
   <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

 </main>

</body> </html>