CSS 3 Spaltenlayout

Question

Layout Link Hallo, Ich möchte ein Layout in CSS und HTML erstellen, wie im Bild gezeigt.

Ich habe verschiedene Dinge ausprobiert und im Internet gesucht, aber ich kann keine Lösung für mein Layout finden. Zuerst versuchte ich mit

div{ 
    width: 100%; 
    column-count: 3; 
    column-rule-color: red; 
    column-rule-width: 8px; 
    column-rule-style: solid; 
} 

Für die erste Zeile sollte dies funktionieren. Aber für den zweiten kann ich nur verwenden:

div{ 
     width: 100%; 
     column-count: 2; 
     column-rule-color: red; 
     column-rule-width: 8px; 
     column-rule-style: solid; 
    column-width: 50%; 
} 

aber ich will nicht beide Spalten 50% sein. Ich hätte gerne zuerst so lange wie die ersten beiden in der ersten Reihe.

Gibt es eine Möglichkeit, diese Aufgabe zu erfüllen?

Answer 1

Hier ist ein Weg, um das zu erreichen

.row { 
 
    display: flex; 
 
} 
 
.row div { 
 
    border: 1px solid; 
 
    height: 30px; 
 
    margin: 5px; 
 
} 
 
.row:nth-of-type(1) div { 
 
    width: 33%; 
 
} 
 
.row:nth-of-type(2) div:first-child { 
 
    width: calc(66% + 10px); 
 
} 
 
.row:nth-of-type(2) div:last-child { 
 
    width: 33%; 
 
} 
 
.row:nth-of-type(3) div { 
 
    width: 100%; 
 
}

<div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div class="row"> 
 
    <div></div> 
 
</div>

Answer 2

Der beste Weg, das Layout unter Verwendung des 960 Grid Rahmen wäre zu erreichen. Es ist ein großartiger Rahmen und ist speziell für solche Zwecke gemacht. Dieser Rahmen wird Ihren Job hundert Mal einfacher machen.

Hier ist der Link: 960 Grid Framework

Hier eine kurze Playlist Tutorial Youtube, wie das 960 Grid-System verwenden: How to use 960.gs