CSS Mit zwei gleichen Höhe Layout Spalten zu erstellen, und Einfügen von drei gleicher Höhe gestapelt Spalten in der rechten Spalte

Question

Ich kann die Tabelle Tag noch Flexbox verwenden. Die meisten unserer Besucher sind ältere Menschen mit IE8.

Ich versuche, zwei gleiche Höhe Layout-Spalten zu erstellen, die links und rechts schwebt.

Die linke Spalte enthält zwei gestapelte div, die nicht die gleiche Höhe hat. aber diese divs sollten expandieren, um die Gesamthöhe von col1 zu füllen.

Die rechte Spalte enthält drei gestapelte Spalten, die die gleiche Höhe haben sollten. Diese div sollte auch die Gesamthöhe von col2 ausfüllen.

Insgesamt sollten col1 und col2 immer die gleiche Höhe haben.

Ich kann feste px Größe für jede Spalten nicht einrichten, da Inhalte, die ins Innere gehen, jeden Tag anders sein können. Ich möchte, dass sowohl der col1- als auch der col2-Inhalt sich ausdehnt, um in die Gesamthöhe zu passen, so dass unten kein Platz mehr übrig bleibt.

Meine Option war die Verwendung von display: table; aber wenn du ein paar gute Vorschläge hast, lass es mich wissen.

(nur für Ihre Referenz, die alle im Bild gezeigten Div, haben eine Grenze.)

<div class="container"> 

<div class="left"> 
    <div class="col-1-1"></div> 
    <div class="col-1-2"></div> 
</div> 

<div class="right"> 
    <div class="col-2-1"></div> 
    <div class="col-2-2"></div> 
    <div class="col-2-3"></div> 
</div> 

Jede Hilfe wäre sehr geschätzt.

Answer 1

Richard Sussans Antwort richtig ist, aber Sie müssen die Spalten (beide links), um schwimmen, um sie nebeneinander erscheinen. Sie müssen auch eine Höhe für die Spalten angeben (sowie ihre übergeordneten Elemente, vorausgesetzt, dass die Höhe in% festgelegt ist), damit ihre untergeordneten Elemente vertikal expandiert werden können. Mit Ihrem Markup soll die folgende CSS den Trick:

html, body, .container { 
    height: 100%; 
} 
.left { 
    float: left; 
    height: 100%; 
    width: 35%; 
} 

.right { 
    float: left; 
    height: 100%; 
    width: 65%; 
} 

.col-1-1 { 
    height: 25%; 
} 

.col-1-2 { 
    height: 75%; 
} 

.col-2-1 { 
    height: 33%; 
} 

.col-2-2 { 
    height: 33%; 
} 

.col-2-3 { 
    height: 34%; 
} 

Answer 2

Sie können einen dieser Prozentsätze in css für Höhe und Breite verwenden und es wird an die Bildschirmgröße des Benutzers anpassen!

Diese funktionieren möglicherweise nicht perfekt, Sie können immer mit den Zahlen rumspielen oder einen anderen Weg versuchen. this helps

.left { 
    height: 100% 
    width: 35% 
} 

.right { 
    height: 100% 
    width: 65% 
} 

.col-1-1 { 
{ 
    height: 25% 
    width: 35% 
} 

.col-1-2 { 
{ 
    height: 75% 
    width: 35% 
} 

.col-2-1 { 
{ 
    height: 33% 
    width: 65% 
} 

.col-2-2 { 
{ 
    height: 33% 
    width: 65% 
} 

.col-2-3 { 
{ 
    height: 34% 
    width: 65% 
}