<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout Forum 03</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="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
/* Clearfix - für Float, falls erforderlich */
@media all {
dl:before,
dl:after,
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
dl:after,
.clearfix:after {
clear: both;
}
}
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0.5rem;
}
body>* {
display: flex;
}
body>*>* {
padding: 0.5rem;
border: 1px solid orange;
border: 1px solid silver;
}
body>*>:nth-child(1) {
flex: 0 0 180px;
}
body>*>:nth-child(2) {
flex: 1 0 1%;
}
img {
display: block;
max-width: 120px;
max-height: 120px;
padding: 0;
margin: 0;
}
body>*>:nth-child(1)>div:nth-child(1) {
width: 120px;
height: 120px;
border: 1px solid gold;
margin: 0 auto;
display: flex;
justify-content: center;
}
body>*>:nth-child(1)>div:nth-child(1)>figure {
padding: 0;
border: 1px solid red;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
body>*>:nth-child(1)>div:nth-child(2) {
/*background-color: silver;*/
}
body>*>:nth-child(1)>div:nth-child(2) p,
body>*>:nth-child(1)>div:nth-child(2) dt,
body>*>:nth-child(1)>div:nth-child(2) dd {
/*display: block;*/
font-size: 0.8rem;
white-space: nowrap;
padding: 0;
margin: 0.2rem;
}
body>*>:nth-child(1)>div:nth-child(2) dl {
}
body>*>:nth-child(1)>div:nth-child(2) dt,
body>*>:nth-child(1)>div:nth-child(2) dd {
}
body>*>:nth-child(1)>div:nth-child(2) dt {
float: left;
clear: both;
}
body>*>:nth-child(1)>div:nth-child(2) dd {
float: right;
}
body>*>:nth-child(2) {
}
body>*>:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
@media only screen and (max-width: 480px) {
body>* {
display: flex;
flex-wrap: wrap;
}
body>*>:nth-child(1) {
display: flex;
justify-content: space-between;
flex: 1 0 51%;
}
body>*>:nth-child(2) {
flex: 1 0 51%;
}
img {
max-width: 90px;
max-height: 90px;
}
body>*>:nth-child(1)>div:nth-child(1) {
width: 90px;
height: 90px;
margin: 0;
}
body>*>:nth-child(1)>div:nth-child(2) {
margin-left: 0.5rem;
}
}
@media only screen and (max-width: 390px) {
body>*>:nth-child(1) {
flex-direction: column;
}
}
</style>
</head>
<body>
<section>
<aside>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Leuchtturm_Arngast.jpg" alt="Leuchtturm">
</figure>
</div>
<div>
<p>Name</p>
<p>Status</p>
<dl>
<dt>Registriert seit:</dt>
<dd>27. Dezember 2012</dd>
<dt>Beiträge</dt>
<dd>2</dd>
<dt>Punkte für Erfolge</dt>
<dd>3</dd>
</dl>
</div>
</aside>
<article>
<div>
<h1>Überschrift</h1>
<p>Ewald lächelte und ging an den Wagen. Das gute Hausweib hatte, obschon es nahe an den Sechzigen stand, noch keinen vollen Tag die Pfähle im Stich gelassen, in denen es von Jugend auf lebte und webte; bloss Theilnahme und Liebe zu Gustav, konnte es zu diesem Entschluss bewegen. </p>
</div>
<div>
<p>Infoleiste: Name, Datum, Melden ...</p>
</div>
</article>
</section>
<section>
<aside>
<div>
<figure>
<img src="https://c1.staticflickr.com/5/4006/4673833040_8e33011df8.jpg" alt="VW Bus">
</figure>
</div>
<div>
<p>Name</p>
<p>Status</p>
<dl>
<dt>Registriert seit:</dt>
<dd>08. August 2015</dd>
<dt>Beiträge</dt>
<dd>124</dd>
<dt>Punkte für Erfolge</dt>
<dd>55</dd>
</dl>
</div>
</aside>
<article>
<div>
<h1>Überschrift</h1>
<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. Die guten Alten staunten bey dem seltenen Feingefühl eines so kleinen Knaben, und hätten von diesem Augenblicke gegen die Schätze von Golconda, dem aufgenommenen Pflegling nicht entsagt.</p>
</div>
<div>
<p>Infoleiste: Name, Datum, Melden ...</p>
</div>
</article>
</section>
</body>
</html>
