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可以做到这一点。

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

如果您需要旧版浏览器支持IE8 +，则可以使用CSS表格布局。

在CSS中将容器设为table。
将左右列设置为table-cell，因此它们将始终自动获得相同的高度。
将位置absolute用于右列中顶部和底部块的相等高度。由于位置技巧可以在不知道容器高度的情况下进行百分比高度。

jsfiddle

.container {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.container > div {
    display: table-cell;
    vertical-align: top;
}
.container .left {
    background: gold;
    height: 150px; /* test height */
}
.container .right {
    background: silver;
    position: relative;
}
.container > div > div {
    position: absolute;
    left: 0;
    height: 50%;
    width: 100%;
}
.container .top {
    background: aqua;
    top: 0;
}
.container .bottom {
    background: lime;
    top: 50%;
}

<div class="container">
    <div class="left">A</div>
    <div class="right">
        <div class="top">B</div>
        <div class="bottom">C</div>
    </div>
</div>

右上角和右下角的高度等于左列

2 个答案: