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

注意：在小提琴中我使用Eric Meyer 的“Reset CSS”2.0

Answer 2

如果您将 DIV 2-5 放入容器 DIV，然后将 DIV 1-6 以及容器 DIV 浮动，您应该处于良好状态。例如，您的 HTML 可能如下所示：

<div class="container">
    <div class="tall">
        ONE
    </div>
    <div class="middle_container">
        <div class="short">
            TWO
        </div>
        <div class="short">
            THREE
        </div>
            <div class="short">
            FOUR
        </div>
        <div class="short">
            FIVE
        </div>
    </div>
    <div class="tall">
        SIX
    </div>
</div>

你的CSS是这样的：

.container {
    width:400px;
    height:300px;
}

.tall {
    width:25%;
    height:100%;
    float:left;
    background-color:#ffffaa;
}

.middle_container {
    width: 50%;
    height: 100%;
    float:left;
    background-color:#bbbbff;
}

.short {
    width: 50%;
    height: 50%;
    float:left;
}

这个小提琴显示了实际的结果：http: //jsfiddle.net/y3QDt/。我对容器内部和外部的 DIV 进行了不同的着色，希望能够更容易地看到发生了什么。