html - css 网格 - 以哪种方式填充父级的 100% - 表格单元格/ float /内联 block ？

Question

这是我的简单网格

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

哪种方式最适合实现这个

• .left 有 70% 的 .wrap 宽度和 100% 的 .wrap 高度
• .right 有 30% 的 .wrap 宽度和 100% 的 .wrap 高度
• .top 和 .bottom 填充 .right 的 50% 高度和 100% 宽度

应该是这样的

我不知道table-cell、inline-block 或float 哪种方式最好。我知道 flexbox 是最简单的解决方案，但我想知道其他方法。

我创建了 codepen还有

Answer 1

你应该添加 box-sizing:border-box 和 display:inline-block
对于 Div 的，在 css2 中我们添加 float 属性到 Div 的。
第 27 行 backgroung
出现语法错误

.wrap {
  width: 75%;
  margin: auto;
  border: 1px dotted black;
  height: 200px;
  font-size: 0;
  box-sizing: border-box;
}
.left {
  width: 70%;
  height: 100%;
  background: blue;
  box-sizing:border-box;
  display:inline-block;
}
.right {
  width: 30%;
  height: 100%;
  background: red;
  box-sizing:border-box;
  display:inline-block;
}
.top {
  width: 100%;
  height: 50%;
  background: green;
}
.bottom {
  width: 100%;
  height: 50%;
  background: yellow;
  box-sizing:border-box;
  display:inline-block;
}

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

http://codepen.io/webafrooz/pen/ZWPBWW