Elemente Vertikal strecken

CaptureVal · 24 März 2020

Gude!

Folgendes Problem: In einer Art Stundenplanübersicht gibt es zwischen 1 und 3 Kurse pro Zeiteinheit. Wenn ein Kurs alleine in einer Zeiteinheit steht, dann heißt das, er füllt die Zeit tatsächlich aus. Das soll auch optisch repräsentiert werden. Das heißt, die Reihe mit z.B. 9-10 Uhr enthält je nach Tag 1-3 Kurse. Die Reihe soll so hoch sein wie der innere Container mit 3 Kursen und die mit 1 oder 2 Kursen sollen sich an die Höhe anpassen und dementsprechend strecken.

Zur Veranschaulichung habe ich ein Bildchen angehängt, das sollte das Problem verständlicher machen.

Wichtig ist auch, dass wie gesagt der Container die Höhe des Subcontainers mit den meisten Kursen haben sollte, damit der Container nicht so hoch ist, wenn es mal nur einen Kurs gibt an jedem Tag. Also optimaler Weise vergebe ich keine feste Höhe für den Container.

Probiert habe ich es mit Flexbox und mit Tabellen. Vor allem mit letzterem kenne ich mich nicht gut aus, bin an beidem gescheitert und hoffe, hier hat jemand eine Idee!

Liebe Grüße
Roman

MrMurphy · 24 März 2020

Ich habe mal ein Beispiel mit Flexbox erstellt:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
   <style>
      body {
         padding: 1rem 1rem 1rem 1rem;
         margin: 0rem 0rem 0rem 0rem;
      }
      .content, section, article {
         padding: 0.5rem;
         border: 1px solid gray;
         border-radius: 0.5rem;
         margin: 0.5rem;
      }
      /*Flexbox Einstellungen*/
      .content {
         display: flex;
         justify-content: space-around;
      }
      .content section {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
      }
      .content section article {
         flex-grow: 1;
      }
   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Layout</h1>
   </header>
   <main id="content" class="content">
      <section>
         <article>
            <p>Spalte 1, Eintrag 1 von 2</p>
         </article>
         <article>
            <p>Spalte 1, Eintrag 2 von 2</p>
         </article>
      </section>
      <section>
         <article>
            <p>Spalte 2, Eintrag 1 von 1</p>
         </article>
      </section>
      <section>
         <article>
            <p>Spalte 3, Eintrag 1 von 3</p>
         </article>
         <article>
            <p>Spalte 3, Eintrag 2 von 3</p>
         </article>
         <article>
            <p>Spalte 3, Eintrag 3 von 3</p>
         </article>
      </section>
   </main>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/elemente-vertikal-strecken.59796/">https://www.html.de/</a></p>
   </footer>
</body>
</html>

Abstände, Ränder und so weiter kannst du natürlich anpassen.

Elemente Vertikal strecken

CaptureVal

Neues Mitglied

Anhänge

MrMurphy

Senior HTML'ler

Neueste Beiträge