Beispiel:Float-5.html
Aus SELFHTML-Wiki
<!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>Bilder mit display: flex positionieren</title> <style>
section {
display: flex;
}
figure img {
width: 100%;
}
.verteilt {
align-items:center;
} </style> </head>
<body>
Bilder mit display: flex positionieren
<section>
<figure>
<img src="http://wiki.selfhtml.org/images/e/e9/Lauf-1-hoch.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>
Lauf an der Pegnitz
Nürnberger Tor
</figcaption>
</figure>
<figure>
<img src="http://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
<figcaption>
Lauf an der Pegnitz
Brücke über die Pegnitz
</figcaption>
</figure>
<figure>
<img src="http://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>
Lauf an der Pegnitz
Mauermühle und Judenturm
</figcaption>
</figure>
</section>
vertikal zentriert
<section class="verteilt">
<figure>
<img src="http://wiki.selfhtml.org/images/e/e9/Lauf-1-hoch.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>
Lauf an der Pegnitz
Nürnberger Tor
</figcaption>
</figure>
<figure>
<img src="http://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
<figcaption>
Lauf an der Pegnitz
Brücke über die Pegnitz
</figcaption>
</figure>
<figure>
<img src="http://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>
Lauf an der Pegnitz
Mauermühle und Judenturm
</figcaption>
</figure>
</section>
</body> </html>
