• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Versetzte Div-Container

Toby1984

Neues Mitglied
Hi meine Lieben,

bin gerade selber dabei, mir selbst Html und CSS bei zu bringen und stelle mir gerade par Übungsaufgaben zusammen. Dabei ist mir gerade die Frage gekommen, wie ich es denn schaffen könnte, das ich zweit DIV-Container nebeneinander habe und in der nächsten Zeile die zwei DIV-Container aber genau anders herrum sind. Und in Zeile 3, geht es dann normal weiter, wie es angefangen hat usw. Am besten s.Skizze. Vielleicht hat jemand eine Idee, wie ich vom Gedanken her am besten daran gehe oder hat vielleicht irgendwo ein Beispiel, was ich mir anschauen könnte. Ich bin für all euren Rat offen und hoffe, das mir jemand kurz etwas Zeit für dieses Thema schenkt.

Ich habe einmal eine Skizze beigefügt und hoffe es ist verständlich. LG
 

Anhänge

  • Zeichenfläche 1.jpg
    Zeichenfläche 1.jpg
    668,7 KB · Aufrufe: 7
  • Zeichenfläche 1_1.jpg
    Zeichenfläche 1_1.jpg
    669,1 KB · Aufrufe: 7
Werbung:
Hi Sempervivum,

genau, die Anzahl ist nicht begrenzt, sondern erweiterbar. Das es mit Flexlayout gehen sollte, habe ich mir auch schon gedacht und probiert. Nur irgendwie klappt das nicht so, wie ich es gerne hätte. Ich habe leider auch kein passendes Beispiel bis jetzt gefunden, wo ich das mal sehen kann. Hast du irgendwo so ein Beispiel vielleicht mal gesehen oder einen Ansatz dafür?

Danke für deine Hilfe.
 
Es hat sich als sinnvoller erwiesen, wenn die Fragenden ihre bisherigen Ergebnisse zeigen, als wenn sie Beispiele gezeigt bekommen, die sie häufig überfordern.

Mit fehlerhaftem oder veraltetem HTML lassen sich keine aktuellen Webseiten erstellen.

Ein Beispiel zum Ausprobieren:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Cardlayout 01</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>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 1rem 0rem;
      }
      dd p {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*.cards*/
   @media all {
      .cards {
         max-width: 1200px;
         margin: 0rem auto;
      }
      .cards dt,
      .cards dd {
         padding: 0.5rem;
         border: 2px solid black;
         border-radius: 0.5rem;
         margin: 0.5rem 0.5rem 0.5rem 0.5rem;
      }
      .cards dt {
         display: flex;
         justify-content: center;
         align-items: flex-start;
      }
   }
   @media only screen and (min-width: 800px) {
      .cards div {
         display: flex;
         flex-wrap: wrap;
      }
      .cards div:nth-child(2n) dt {
         order: 2;
      }
      .cards dt {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 1rem - 4px - 1rem);
      }
      .cards dd {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 1rem - 4px - 1rem);
      }
   }
   @media only screen and (min-width: 0px) {
   }

   /*Spezielle Einstellungen*/
   @media all {
   }
   @media only screen and (min-width: 0px) {
   }

   /*Vorlagen zum Kopieren*/
   /*CSS*/
   @media all {
   }
   @media only screen and (min-width: 0px) {
   }
   @media only screen and (max-width: 0px) {
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Cardlayout</h1>
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
      <dl class="cards">
         <div>
            <dt>
               <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Ducks_in_plymouth%2C_massachusetts.jpg/450px-Ducks_in_plymouth%2C_massachusetts.jpg" alt="Beispielbild">
            </dt>
            <dd>
               <h2>Ente</h2>
               <p>Die Familie der Entenvögel (Anatidae) ist die artenreichste aus der Ordnung der Gänsevögel (Anseriformes). Sie umfasst 47 Gattungen und etwa 150 Arten. Zu dieser Gruppe gehören so bekannte Typen von Wasservögeln wie die Enten, Gänse und Schwäne. Vielleicht abgesehen von den Hühnervögeln hat keine andere Vogelgruppe so zahlreiche Wechselbeziehungen zum Menschen: Allein fünf Arten wurden domestiziert, Entenvögel werden wegen ihres Fleisches, ihrer Eier und ihrer Federn gejagt und gehalten, und in vielerlei Form haben sie Eingang in Märchen, Sagen und Comics erhalten.</p>
            </dd>
         </div>
         <div>
            <dt>
               <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Kaiseradler_Aquila_heliaca_e_amk.jpg/1024px-Kaiseradler_Aquila_heliaca_e_amk.jpg" alt="Beispielbild">
            </dt>
            <dd>
               <h2>Adler</h2>
               <p>Der Begriff Adler ist im weiteren Sinn eine nicht genau definierte Sammelbezeichnung für große und kräftige Arten von Greifvögeln in der Familie der Habichtartigen, wie beispielsweise für die Gattung der Seeadler, den Schlangenadler oder den Philippinenadler. Im engeren Sinn steht die Bezeichnung Adler für die Gattung Echte Adler (Aquila) mit den ihr zugehörigen Arten. Deren größter lebender Vertreter ist der Steinadler. Außerhalb der Habichtartigen wird im Deutschen auch der in seine eigene Familie gestellte Fischadler unter die Adler gezählt.</p>
               <p>Mit einer Spannweite bis zu 3,00 Meter gilt der um 1400 n. Chr. ausgestorbene Haastadler (Harpagornis moorei) als größter bekannter Adler. Sein Lebensraum befand sich auf Neuseeland.</p>
            </dd>
         </div>
         <div>
            <dt>
               <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Archilochus-alexandri-002-edit.jpg/450px-Archilochus-alexandri-002-edit.jpg" alt="Beispielbild">
            </dt>
            <dd>
               <h2>Kolibri</h2>
               <p>Die Kolibris (Trochilidae) sind Vögel und stellen nach Ansicht fast aller Autoren die einzige Familie der Ordnung der Kolibriartigen (Trochiliformes) dar.</p>
            </dd>
         </div>
         <div>
            <dt>
               <img src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Mehlschwalbe_im_Flug.jpg">
            </dt>
            <dd>
               <h2>Schwalbe</h2>
               <p>Die Schwalben (Hirundinidae) sind eine artenreiche Familie der Ordnung Sperlingsvögel (Passeriformes), Unterordnung Singvögel (Passeres). Schwalben ernähren sich von Fluginsekten, in Mitteleuropa sind sie Zugvögel. Der typisch gegabelte Schwalbenschwanz war für andere Objekte (z. B. den Schmetterling) namensgebend, ebenso wie der charakteristische Nestbau (z. B. für die Burgruine Schwalbennest oder die Schwalbennestorgel). Mauersegler und Seeschwalben gehören dieser Familie nicht an.</p>
            </dd>
         </div>
      </dl>
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/versetzte-div-container.60157/">https://www.html.de/</a></p>
   </footer>
</body>
</html>

Entscheidend ist was in dem Block unter /*.cards*/ steht.
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben