把一個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>