MrMurphy: GRID - Element bei < als 30em in zwei Spalten aufteilen

Beitrag lesen

SELF-Forum

GRID - Element bei < als 30em in zwei Spalten aufteilen

MrMurphy
– Informationen zu den Bewertungsregeln

Für dein Problem sehe ich am sinnvollsten eine Lösung mit Flexbox (display: flex; )

Ich gehe davon aus, das .navigations ein Container (div, nav, article, ...) über die gesamte Spaltenbreite ist. Innerhalb von .navigations befinden sich wiederum zwei Container, die die Hauptnavigation und die Interne Navigation enthalten.

Dafür habe ich mal eine einfache Lösung erstellt. Die p-Elemente kannst du einfach durch die von dir gewählten Container ersetzen.


<!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">

   <style>

   /* .navigations */
   @media all {
      .navigations {
         background-color: gold;
      }
   }
   @media only screen and (min-width: 40em) {
      .navigations {
         display: flex;
      }
      .navigations :nth-child(1) {
         margin-right: auto;
      }
   }

   </style>
</head>
<body>
   <header>
      <h1>Layout</h1>
   </header>
   <nav class="navigations">
      <p>Hauptnavigation</p>
      <p>Interne Navigation</p>
   </nav>
   <footer>
      <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2024/aug/02/grid-element-bei-als-30em-in-zwei-spalten-aufteilen/1816349#m1816349">https://forum.selfhtml.org/</a></p>
   </footer>
</body>
</html>
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln