nicht angemeldet
Hallo,
ich würde das folgendermaßen lösen:
CSS
* {
box-sizing: border-box;
}
html {
font-family: Sans-Serif;
font-size: 120%;
}
body {
max-width: 94%;
margin: 1rem auto;
}
figure {
padding: 0;
margin: 0;
}
img {
display: block;
max-width: 100%;
max-height: 100vh;
margin: 0 auto;
}
header {
border-bottom: 3px solid silver;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: baseline;
}
header>* {
padding: 0.5rem;
margin: 0;
}
header span {
display: flex;
}
header a {
color: gray;
padding: 0 1rem;
}
header a:last-child {
padding: 0 0 0 1rem;
}
article.teaser>* {
min-width: 10rem;
padding: 0.5rem;
border: 1px solid silver;
border-radius: 0.4rem;
margin: 0.5rem;
flex: 1 1 1%;
}
article.teaser {
min-width: 20rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
@media only screen and (max-width: 1000px) {
article.teaser>* {
flex: 1 1 40%;
}
}
@media only screen and (max-width: 900px) {
header span {
width: 100%;
justify-content: space-between;
}
header a:first-child {
padding: 0 1rem 0 0;
}
}
@media only screen and (max-width: 700px) {
article.teaser>* {
flex: 1 1 60%;
}
}
HTML:
<body>
<header>
<h1>Terminkalender</h1>
<span>
<a href="#">Alle Termine</a>
<a href="#">Konzerte</a>
<a href="#">Partys</a>
<a href="#">Flohmärkte</a>
</span>
</header>
<article class="teaser">
<section>
<img src="http://lorempixel.com/500/350/transport" alt="Test Bild">
<h1>Autobahnwahn</h1>
<p>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool. Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft. Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen.</p>
</section>
<section>
<img src="http://lorempixel.com/500/350/city" alt="Test Bild">
<h1>Hinter Oberhausen</h1>
<p>Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen. Es wird links überholt, es wird rechts überholt. Es wird gar nichts mehr, alles steht und macht lange Gesichter. Ich dagegen wechsle die Cassette. Es geht weiter. Vor und hinter mir hektische Spurenwechsel. So zieht sich das Stück A 2 bis zum Recklinghauser Kreuz. Der erhofften Entspannung folgt zuverlässig der Vollfrust.</p>
</section>
<section>
<img src="http://lorempixel.com/500/350/nature" alt="Test Bild">
<h1>Die A 43</h1>
<p>Die A 43 bis Münster ist genauso voll wie das Kamener Kreuz zur Rush-hour. Auf der A 1 ist dann endgültig Schluss mit lustig.</p>
</section>
</article>
</body>
Gruss
MrMurphy
Matthias Apsel
Gunnar Bittersmann
marctrix