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’s “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进行了不同的着色，希望能够更容易地看到正在发生的事情。

在对齐和堆叠的内部划分6个div

2 个答案: