css - 如何获得两个相等的列，一列包含 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 提供类，例如垂直 div 的“列”和内部水平 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>