/ / Wie bekomme ich zwei gleiche Spalten, eine Spalte mit 3 gleich hohen div "Zeilen"? - css

Wie bekomme ich zwei gleiche Spalten, eine Spalte mit 3 gleich hohen div "Zeilen"? - css

Ich habe zwei div-Spalten, die rechte Spalte enthält den Inhalt der dynamischen Liste, die linke enthält 3 divs, die sich wie Zeilen verhalten):

Bildbeschreibung hier eingeben

Ich habe viele Methoden gefunden, um gleiche Höhe für die zwei Hauptspalten zu erhalten, aber gibt es eine Möglichkeit, die drei div "Reihen" auch zu 33.33% Höhe zu bekommen?

Antworten:

1 für die Antwort № 1

Der HTML-Code:

header
<div id="wrapper">
<div id="left_container">
<div class="content">
#1 left asd
</div>
<div class="content">
#2 left asd
</div>
<div class="content">
#3 left asd
</div>
</div>
<div id="right_container">
<div class="content">
right asd
</div>
</div>
</div>
footer

Das CSS dafür

div {
margin: 0;
padding: 0;
display: block;
border: 1px solid #ccc;
height: 10em; /* should be px or em */
margin: -1px; /* size of border */
font-size: 20px; /* modulate the height of div like: 20x10=200px */
}
#wrapper {
width: 100%;
}
#wrapper:after {
clear: both;
display: block;
content: " ";
}
#left_container,
#right_container {
float: left;
width: 50%;
height: 100%;
}
#left_container .content {
height: 33.33%;
}
#right_container .content {

}

Live-Beispiel: http://jsfiddle.net/Z2hpu/2/


0 für die Antwort № 2

Gib deinen Divs Klassen wie "column" zu den vertikalen divs und "row" zu den inneren horizontalen zum Beispiel. Dann wenden Sie dieses CSS an:

.column { height:600px; width:50%; }
.column > .row { height:33%; width:98%; }

0 für die Antwort № 3

Flexbox kann dies mit der Anzahl der Elemente tun, die Sie ohne feste Höhen angegeben haben:

http://codepen.io/cimmanon/pen/Gmljd

.wrapper {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

.a, .b {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
display: flex;
}

.a div, .b {
border: 1px solid;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}

<div class="wrapper">
<div class="a">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

<div class="b">
b
</div>
</div>