css grid - 填充100％父级的哪种方式 - table-cell / float / inline-block？

Question

这是我的简单网格

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

哪种方式最适合实现此

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

看起来应该是这样的

如果table-cell，inline-block或float，我不知道哪种方式最好。我知道flexbox是最简单的解决方案，但我想知道如何做到这一点。

我也创建了codepen

Answer 1

您应该添加box-sizing:border-box和display:inline-block
对于Div，在css2中我们将float属性添加到Div中 语法错误建立在第27行backgroung

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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