/ / Como obter duas colunas iguais, uma coluna contendo 3 div altura igual "linhas"? - css

Como obter duas colunas iguais, uma coluna contendo 3 div altura igual "linhas"? - css

Eu tenho duas colunas div, a coluna da direita contém conteúdo de lista dinâmica, a esquerda contém 3 divs que agem como linhas):

insira a descrição da imagem aqui

Eu encontrei muitos métodos para obter altura igual para as duas colunas principais, mas existe uma maneira de obter as três div "linhas" para ser 33,33% de altura cada também?

Respostas:

1 para resposta № 1

O código 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

O CSS para isso

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 {

}

Exemplo ao vivo: http://jsfiddle.net/Z2hpu/2/


0 para resposta № 2

Dê aulas para seus divs como "coluna" para os divs verticais e "row" para os horizontais internos, por exemplo. Em seguida, aplique este css:

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

0 para resposta № 3

O Flexbox pode fazer isso com o número de elementos que você especificou sem alturas fixas:

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>