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

Question

我有两个div列，右列包含动态列表内容，左边包含3个像行一样的div：

我找到了很多方法来获得两个主要列的相同高度，但有没有办法让三个div“行”的高度分别为33.33％？

Answer 1

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

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 {

}

实例： http://jsfiddle.net/Z2hpu/2/

Answer 2

为你的div提供类，例如“column”到垂直div，“row”到内部水平的div。然后应用这个css：

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

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>