javascript - 自定义 CSS 网格布局

Question

我正在尝试实现具有四列的网格布局，其中一列包含 2 个 div，一个位于另一个之上。下图更好地描述了我的目标:

A 和 B 是我在 div 上应用的 CSS 类，但正如您在这个 fiddle 中看到的那样: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;
}

fiddle :http://jsfiddle.net/ULHWk/12/

希望能帮到你