如何获得两个相等的列，一列包含3个相等的高度div“行”？

Question

我有两个格列，右列包含动态列表内容，左侧包含3个div的其中像行）：用于获取高度相等的两个主要

我发现很多方法列，但是有没有办法让三个div“行”的高度分别为33.33％？

Answer 1

给你的div类，例如“列”到垂直div，“row”到内部水平div。然后将此CSS：

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

Answer 2

的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 

此

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 { 

} 

活生生的例子的CSS： http://jsfiddle.net/Z2hpu/2/

Answer 3

Flexbox，就可以做到这一点你的元素数量“已经没有固定的高度规定：

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>