html - right-top 和 right-bottom 的高度一起等于左列

Question

我已经将右侧的列拆分为顶部和底部。在每个部分中，我在执行以下操作时遇到问题:我希望顶部占据左列高度的 50%，底部占据左列高度的另外 50%。

+-------------------+-------------------+
|                   |                   |
|                   |(right top 50%)    |
|                   |                   |
|(left column fill) +-------------------+
|                   |                   |
|                   |(right bottom 50%) |
|                   |                   |
+-------------------+-------------------+

这是我的html

<div class="container">
<div class="container2">
    <div class="left_col">      
    <div class="right_col">
        <div class="right_top"> 
        <div class="right_bottom">
        </div>
        </div>
    </div>
    </div>
</div>
</div>

这是我的CSS

.container {
    clear: left;
    float: left;
    width: 95%;
    margin: auto;
    background-color: #F5F3ED;
    color: #333;
    overflow: hidden;

}

.container2 {
    float: left;
    width: 100%;
    position: relative;
    right: 50%

}

.left_col {
    float: left;
    width: 60%;
    position: relative;
    left: 52%;
    overflow: hidden;
    background-color: #C5D5CB;
    padding: 0.5em;
    border: 2px solid black;
}

.right_col {
    float: left;
    width: 30%;
    position: relative;
    left: 56%;
    overflow: hidden;
    margin: 0;
    padding: .5em;
}



.right_top {
    background-color: orange;
    height: 50%;
}

.right_bottom {
    background-color: green;
    height: 50%;
}

Answer 1

Flexbox 可以做到这一点。

* {
  box-sizing: border-box;
}
.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.left,
.right {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  border: 1px solid grey;
}

.left {
      height: 100px;
}

.right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.top,
.bottom {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 50%;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  border: 1px solid green;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="right">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>