/ / Jak uzyskać dwie równe kolumny, jedna kolumna zawierająca 3 równe wysokości div "wiersze"? - css

Jak uzyskać dwie równe kolumny, jedna kolumna zawierająca 3 równe wysokości "wiersze" div? - css

Mam dwie kolumny div, prawa kolumna zawiera zawartość listy dynamicznej, a po lewej 3 divy, które działają jak wiersze):

wprowadź opis obrazu tutaj

Znalazłem wiele metod uzyskiwania równej wysokości dla dwóch głównych kolumn, ale czy istnieje sposób na to, aby trzy "rzędy" div były równe 33,33% wysokości?

Odpowiedzi:

1 dla odpowiedzi № 1

Kod HTML:

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

CSS do tego

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 {

}

Przykład na żywo: http://jsfiddle.net/Z2hpu/2/


0 dla odpowiedzi nr 2

Daj klasy twoim divom takim jak "kolumna" do pionowych divów i "wierszy" do wewnętrznych poziomych na przykład. Następnie zastosuj to css:

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

0 dla odpowiedzi № 3

Flexbox może to zrobić z liczbą elementów, które określiłeś bez ustalonych wysokości:

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>