将一个div放在两个垂直的div旁边

Question

我试图让一个div在其容器中占据100％的高度（容器的高度为50％），并且旁边有两个div，它们各自的高度为50％。

这是我想表达的示例：

我希望所有div之间都有一个外边距，如上图所示。

这是我目前的代码:

 <div style="height: 50%;">
    
<div style="height: 100%; float: left; margin-right: 15px;">
<p>Content</p>
</div>
    
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
    
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
    
</div>

JsFiddle: https://jsfiddle.net/ne4njtvr/

（原文已为英文，直接保留即可）

- bob jomes

Answer 1

像这样，也许可以吗？

注意，如果您需要支持旧版本的浏览器，也可以使用display: table来实现

html, body {
  margin: 0;
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.wrapper .left,
.wrapper .right  {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wrapper .right div  {
  flex: 1;
}
.wrapper .right div ~ div  {
  flex: 2;
}
div {
  border: 1px solid;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="left">
    Left
  </div>
  <div class="right">
    <div>
      Right - Top
    </div>
    <div>
      Right - Bottom
    </div>
  </div>
</div>

- Asons

---

抱歉回复晚了，我所在的地区一直存在连接问题。如果我想让“右下角”比“右上角”更大，应该如何实现？ - bob jomes

@bobjomes 更新了我的答案...添加了一个规则，将右下角的div设置为flex: 2，这意味着它占用了可用空间中的2/3（1+2）。你也可以将它们分别设置为33%和66%。 - Asons