/ / Ako získať dva rovnaké stĺpce, jeden stĺpec obsahujúci 3 rovnaké výšky div "riadky"? - css

Ako získať dva rovnaké stĺpce, jeden stĺpec obsahuje 3 rovnaké výšky div "riadky"? - css

Mám dva stĺpce div, pravý stĺpec obsahuje obsah dynamického zoznamu, ľavý obsahuje 3 diely, ktoré sa správajú ako riadky):

tu zadajte popis obrázku

Našiel som veľa metód na získanie rovnakej výšky pre dva hlavné stĺpce, ale existuje spôsob, ako dostať tri div "riadky" byť 33,33% výšky každý rovnako?

odpovede:

1 pre odpoveď č. 1

Kód 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 pre toto

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 {

}

Živý príklad: http://jsfiddle.net/Z2hpu/2/


0 pre odpoveď č. 2

Dajte triedy vašim divs ako "stĺpec" do vertikálnych divs a "row" na vnútorné horizontálne napríklad. Potom použite tento css:

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

0 pre odpoveď č. 3

Flexbox to môže robiť s počtom prvkov, ktoré ste zadali bez pevných výšok:

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>