浮动div块。一个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

您需要将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