自定义CSS网格布局

Question

我正在尝试使用四列实现网格布局，其中一列包含2个div而另一列。下图更好地描述了我的目标：

A和B是我在div上应用的CSS类，但正如你在这个小提琴中所看到的那样：http://jsfiddle.net/ULHWk/1/它的行为并不像我想要的那样。 div的宽度和高度是固定的。

<div id="#container">
    <div class="A"></div>
    <div class="A"></div>
    <div class="B">up</div>
    <div class="B">down</div>
    <div class="A"></div>
</div>

.A {
    float: left;
    width: 25%;
    height: 100px;
    background: #00ff00;
}

.B {
    float: left;
    width: 25%;
    height: 50px;
    background: #0000ff;
    clear: both;
}

任何想法如何更新我的CSS以达到图像中的位置？ 使用twitter bootstrap的解决方案也是可以接受的。

我无法以任何方式修改html，所以我正在寻找一种只需要CSS的解决方案。

谢谢！

Answer 1

您只需要使用css进行一些调整：

.B {
    float: left;
    width: 25%;
    height: 50px;
    background: #0000ff;

}
.B:nth-child(4){
    margin-left: -25%;
    margin-top: 50px;
}

小提琴：http://jsfiddle.net/ULHWk/12/

希望我能帮忙

Answer 2

用A包裹B并将B宽度更新为100％;

<div id="#container">
    <div class="A"></div>
    <div class="A"></div>
    <div class="A">
        <div class="B">up</div>
        <div class="B">down</div>
    </div>
    <div class="A"></div>
</div>

example

Answer 3

你必须将两个div包含在A中的B类。

<div id="container">
    <div class="A"></div>
    <div class="A"></div>
    <div class="A">
        <div class="B">up</div>
        <div class="B">down</div>
    </div>
    <div class="A"></div>
</div>

Demo