Beispiel:CSS2 float-block.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:SELFHTML-Beispiel-Grundlayout.css">
<title>float von Block-Elementen</title>
<style>
img {
float:left;
margin-right: 0.5em;
opacity: 0.4;
border: thin solid #337599;
width: 14em;
}
p {
background: #fdfcf3;
border: thin solid #dfac20;
border-radius: 0 0.2em 0.2em;
margin-left: 1em;
padding-left: 1em;
/* overflow: auto; */
}
aside {
width: 20em;
border: medium solid #c32e04;
border-radius: 0 0.2em 0.2em;
background: #ffebe6;
overflow: auto;
}
h1 {
font-size: 1.2em;
}
body {
font-family: sans-serif;
max-width: 50em;
border: thin dotted #337599;
animation: screens 9s infinite steps(3);
}
@keyframes screens {
0% {
width: 23em;
}
100% {
width: 58em;
/* Angezeigter Endwert ist 46em, weil steps die Differenz drittelt und
* dann die Schritte 0/3, 1/3 und 2/3 bildet. steps(3,jump-none) würde helfen,
* schließt aber ältere Browser aus. */
}
}
</style>
</head>
<body>
<h1>float von Block-Elementen</h1>
<img src="https://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<p>Lauf an der Pegnitz ist die Kreisstadt des mittelfränkischen Landkreises Nürnberger Land und zählt etwa 28.000 Einwohner. Die fränkische Stadt befindet sich rund 17 Kilometer östlich von Nürnberg und ist Teil der Metropolregion Nürnberg.
</p>
<aside>
<h2>Heute großer Flohmarkt!</h2>
Marktplatz; ab 16:00 Uhr
</aside>
<p>Fotos: privat; Text: <a href="https://de.wikipedia.org/wiki/Lauf_an_der_Pegnitz">Wikipedia</a></p>
</body>
</html>
