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

Question

我想要一个div，其高度为100％的容器（高度为50％）和旁边的两个div，每个高度为50 ％。

这是我的意思的一个例子：

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

到目前为止，这是我的代码：

＆＃13;

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

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

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>