nicht angemeldet
Hallo,
ich würde das folgendermaßen machen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Bildergalerie 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
}
/*Spezielle Einstellungen*/
@media all {
main {
display: flex;
flex-wrap: wrap;
/* Die unterste der drei folgenden Möglichkeiten ist aktiv.
Zum Testen einfach mal tauschen. */
justify-content: space-between;
justify-content: flex-start;
justify-content: space-around;
}
figure,
figcaption {
padding: 0;
margin: 0;
}
figure {
position: relative;
max-width: 100px;
margin: 0.3rem 0.2rem;
}
figure img {
max-width: 100%;
display: block;
}
figcaption {
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
color: white;
background: rgba(0,0,0,0.5);
}
}
</style>
</head>
<body>
<main>
<figure>
<img src="http://www.andre-schuerrle.de/wp-content/themes/andre/library/images/facebook_post_thumbnail_100x100.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Nürnberger Tor</figcaption>
</figure>
<p>Die restlichen Bilder in figure-Elementen wie das erste (oder dieses bliebig häufig kopieren) und diesen Hinweis löschen.</p>
</main>
</body>
</html>
Gruss
MrMurphy
Matthias Apsel
Auge
Gunnar Bittersmann