Beispiel:CSS-Box-Modell-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<style>
article {
width: 600px;
height: 200px;
border: 1px solid;
padding: 0;
}
section, aside {
width: calc(33.3% - (2px + 10px + 10px));
height: calc(200px - (2px + 10px ));
border: 1px solid red;
margin: 0 5px;
padding: 5px;
float: left;
}
</style>
<title>Beispiel: pixelgenaue Berechnung mit calc()</title>
</head>
<body>
<h1>pixelgenaue Berechnung mit calc()</h1>
<main>
<article>
<section>
<h2>calc()-Funktion</h2>
<p>Die Funktion <code>calc()</code> kann überall dort verwendet werden, wo eine Eigenschaft ein Maß erwartet.</p>
</section>
<section>
<h2>Layout mit float</h2>
<p>Die float-Eigenschaft ist dafür gedacht, Bilder oder andere Elemente innerhalb eines Textes umfließen zu lassen.</p>
<p>Für mehrspaltige Layouts ist eine Umsetzung mit Flexbox oder dem Grid Layout Stand der Technik: </p>
</section>
<aside>
<h2>Links</h2>
<ul>
<li><a href="https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Funktionen#Berechnungen_-_Die_calc-Funktion">calc()</a></li>
<li><a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/float">float</a></li>
</ul>
</aside>
</article>
</main>
</body>
</html>