nicht angemeldet
Hallo
dann könntest du das zum Beispiel folgendermaßen lösen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox Problem 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: Sans-Serif;
font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
}
body {
margin: 0;
}
main > * {
padding: 1rem;
border: 1px solid silver;
margin: 1rem;
}
}
/*Flexbox Einstellungen*/
@media all {
main {
display: flex;
flex-wrap: wrap;
}
main > * {
flex: 0 1 auto;
width: calc(50% - 2rem);
}
main > :nth-child(1n+5) {
flex: 0 1 auto;
width: calc(50% - 1.99rem);
}
}
@media only screen and (max-width: 850px) {
main > :nth-child(1n+1) {
flex: 0 1 auto;
width: calc(100% - 2rem);
}
main > :nth-child(4) {
display: none;
}
}
</style>
</head>
<body>
<main>
<article>
<h2>A Gummibärchen</h2>
<p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.</p>
</article>
<article>
<h2>B Lesbarkeit</h2>
<p>Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen. Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence. Er hat diesen Copyblock weder gestaucht, gezerrt, noch in Versalien oder gar in 6 Punkt Eurostile Outline gesetzt. Er hat ihn ganz einfach lesbar gemacht. Offenbar sogar ziemlich gut, sonst hätten Sie wohl schon einige Zeilen zuvor die Leselust verloren.</p>
</article>
<article>
<h2>C Wenn ich gross bin</h2>
<p>Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.</p>
</article>
<article>
<h2>D Millionär Michel</h2>
<p>In Deutschland gibt es rund 120.000 Vermögensmillionäre. Sie gelten als die Reichen im Lande. Damit sind ihnen zwei Dinge ganz sicher: Neid und immer neue Begehrlichkeiten des Fiskus. Wer da glaubt, von einer Million als Bonvivant gut leben zu können, der kennt das deutsche Steuerrecht schlecht. Stellen wir uns den steuerehrlichen Herrn Michel vor, der eine Million erarbeitet oder geerbt hat. Vielleicht ist er ein Winzer, der sich zur Ruhe gesetzt und die Weinberge verkauft hat, vielleicht ist er auch ein in die Jahre gekommener Handwerker oder Zahnarzt.</p>
</article>
<article>
<h2>E Bey Gustav</h2>
<p>Kaum standen am folgenden Tage die hohen Felsengipfel im Glanz des Sonnenlichts, so hüpfte Gustav aus dem Bette und fand - wem kommt dabey nicht das ehemahls selbst genossene kindische Entzücken beym Anblick des Weihnachtsgeschenks ins Gedächtniss? - einen netten Anzug auf dem Stuhle am Bette, den die Gattinn des Schultheissen von den Söhnen eines im Flecken wohnenden Edelmannes, einstweilen angenommen hatte, da sich nicht so schnell, als sie es jetzt wünschte, die Nähnadeln zu Buchenthal in Bewegung setzen liessen. Ewalds hatten ein Weilchen auf das Benehmen des kleinen Lieblings gelauscht, und öffneten das Gemach, als sich eben seine Empfindungen in ein lautes »Ach wie schön!« auflösten. »Guten Tag, Papa, guten Tag, Mama!« schluchzte Gustav, und eilte den Kommenden entgegen, um mit tausend Händeküssen ihnen Dank und Liebe zu zollen.</p>
</article>
<article>
<h2>F Schuhmacher und Schütze</h2>
<p>Ein Holzschuhmacher und ein Bogenschütze mit Brot- beziehungsweise Wassersack durchschritten eine Saccharose-Pfütze.</p>
</article>
<article>
<h2>G Setzerei Appel</h2>
<p>Zu meiner Entschuldigung kann ich nur sagen: Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben. Wenn ich gewusst hätte, dass Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben - da hätte ich wahrlich was Besseres schreiben können als diesen Stuss.</p>
</article>
</main>
</body>
</html>
Gruss
MrMurphy
Auge
Gunnar Bittersmann
Tabellenkalk