css - 内部有 6 个 div 的 Div 对齐并堆叠

Question

我正在尝试制作一个包含 6 个 Div 的包含 DIV。最左边和最右边是 25% 宽和 100% 高，而中间的 4 个都是 25% 宽和 50% 高并且彼此堆叠。类似于我下面的粗略绘图:

-------------------------------------------
|          | Div 2    | Div 3   |         |
|   DIV 1  |          |         |         |
|          | All 4 25%| width   |         |
|25% width |__________| ________|  Div 6  |
|          |          |         | same as |
|100%      |    50%   | Height  |         |
| height   |          |         | Div 1   |
|          | Div 4    | Div 5   |         |
-------------------------------------------

我一直在接近，但这让我感到难过。谢谢!

Answer 1

例子:

HTML:

<div class="parent">
    <div class="large" style="background:red;"></div><!--
    --><div class="large">
    <div class="box" style="background:yellow;"></div>
    <div class="box" style="background:green;"></div>
    </div><!--
    --><div class="large">
    <div class="box" style="background:black;"></div>
    <div class="box" style="background:aqua;"></div>
    </div><!--
    --><div class="large" style="background:blue;"></div>
</div>

CSS:

html, body, .parent {
    width: 100%;
    height:100%;
}

.large{
    height:100%;
    width:25%;
    display:inline-block;
}

.box{
    width:100%;
    height:50%;
}

JSFiddle

注意:在 fiddle 中我使用 Eric Meyer’s “Reset CSS” 2.0