Beispiel:CSS-Box-Modell-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>