浮动的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