浮動的div塊。一個度100％的高度旁邊的50％，兩個堆疊的div高度

Question

我想創建模塊的這樣一個網格：

我有一個單獨的模塊式的，和我有所有不同大小的盒子的類，我根據我想要的大小添加到每個盒子的div類：（100％/ 50％/ 33％/ 25％寬度&高度）。

我在堆疊上面圖片左上角的框。我想我必須創建另外一個或兩個類來覆蓋周圍框的浮點數，但我不知道該怎麼做。這裏是我的代碼：

HERE'S A SIMPLE FIDDLE

HERE'S IT IS WITH THE CURRENT CODE

HTML：

<div class="box width_25 container_150"> 
    <div class="header">Half Size Title</div> 
    <div class="content"> 
     Top box 
    </div> 
</div> 
<div class="box width_25 container_150"> 
    <div class="header">Half Size Title 2</div> 
    <div class="content"> 
     Box right below 
    </div> 
</div> 

<div class="box width_50 container_300"> 
    <div class="header">Total Mentions</div> 
    <div class="content"> 
     Center div 
    </div> 
</div> 

<div class="box width_25 container_300"> 
    <div class="header">Title</div> 
    <div class="content"> 
     Right div 
    </div> 
</div> 

CSS：

/* Variable Widths */ 

.box { 
    display:block; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 1%; 

    background: #FFF; 
    color: #333; 
    border:1px solid #DDD; 
    box-shadow:0px 0px 5px 1px #DDD; 
} 

.width_100 { 
    display: inline-block; 
    float: left; 
    width: 98%; 
} 

.width_50 { 
    display: inline-block; 
    float: left; 
    width: 48%; 
} 

.width_33 { 
    display: inline-block; 
    float: left; 
    width: 31.33%; 
} 

.width_25 { 
    display: inline-block; 
    float: left; 
    width: 23%; 
} 

.container_150 { 
    height:130px; // not 150px to compensate for margins 
} 
.container_200 { 
    height:200px; 
} 
.container_250 { 
    height:250px; 
} 
.container_300 { 
    height:300px; 
} 
.container_400 { 
    height:400px; 
} 

Answer 1

您需要WR AP在一個div堆疊的div來實現這一

<div style="width:30%;float:left"> 
    <div style="width:100%; background:blue; height:100px"></div> 
    <div style="width:100%; background:yellow; height:100px"></div> 
</div> 
<div style="width:70%; float:right;background:red; height:200px"></div> 

看看這個fiddle