Question

我正在尝试构建以下布局：

+-----------------------------------+
|                                   |
+-----------------------------------+
+-----------------------------------+
| +-------------------------------+ |
| |                               | |
| +-------------------------------+ |
| +-----+  +-------------+ +------+ |
| |     |  | +---------+ | |      | |
| |     |  | |         | | |      | |
| |     |  | |         | | |      | |
| |     |  | +---------+ | |      | |
| |     |  | +---+ +---+ | |      | |
| |     |  | |   | |   | | |      | |
| |     |  | |   | |   | | |      | |
| |     |  | |   | |   | | |      | |   
| |     |  | +---+ +---+ | |      | |
| +-----+  +-------------+ +------+ |
+-----------------------------------+

但由于某种原因，div不会扩展到全宽或高度：http://jsfiddle.net/vmpgf/

有什么建议吗？

由于

Answer 1

嗯，这会让你非常接近，我在右边的div有一些问题，并且由于某种原因它只适用于三者中的总div宽度加起来达到99％所以我确信这不是“答案”，但会让你亲近。

HTML -

<div id="divbanner">Top Banner</div>
<div id="container">
    <div id="banner">
        Banner
    </div>
    <div id="left">
        Left
    </div>
    <div id="center">
        <div id="centertop">
            Center Top
        </div>
        <div id="centerleft">
            Center Left
        </div>
        <div id="centerright">
            Center Right
        </div>
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS -

#divbanner {
    width: 100%;
    background: #F45;
}
#container {
    width: 100%;
    background: #00C;
}
#banner {
    width: 100%;
    background: #778;
}
#left {
    width: 30%;
    background: #cc5;
    display: inline-block;
}
#center {
    width: 39%;
    background: #cc7;
    display: inline-block;
}
#right {
    width: 30%;
    background: #cc7;
    display: inline-block;
}
#centertop {
    width: 100%;
    background: #445;
}
#centerleft {
    width: 50%;
    background: #c62;
    float: left;
}
#centerright {
    width: 50%;
    background: #062;
    float: right;
}

在这里试试：http://jsfiddle.net/tyDq5/

Div Div内的全宽和全高，相对于彼此

1 个答案: