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

Question

我试图让它有一个div，它的容器中有100％的高度（其高度为50％），旁边有两个div，每个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/

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>