Question

我想要这个布局：

+-----------+------------------------+--------------+
|                                                   |
|                     TOP                           |
|                                                   |
|                                                   |
+-----------+------------------------+--------------+
|           |                        |              |
|           |                        |              |
|           |                        |              |
|     B     |       CONTENT          |       B      |
|           |                        |              |
|           |                        |              |
+-----------+                        |--------------+
|           |                        |              |
|           |                        |              |
|           |                        |              |
|     C     |                        |       D      |
|           |                        |              |
|           |                        |              |
|           |                        |              |
+-----------+------------------------+--------------+

“TOP”和“B”有一个背景：图像（从顶部的蓝色到白色的颜色渐变 - 例如 - 在底部），“CONTENT”是主页面（菜单，条目等），“C”是白色。

如果“D”也是白色，则没有问题。但“D”是其他颜色，例如红色。

我必须设置这个，当“CONTENT”固定为900px和center（margin：auto）时，我必须考虑不同的监视器宽度。 “C”颜色必须位于内容的左侧，“D”位于右侧。页面必须与IE7,8,9和其他浏览器兼容。

怎么做？

更新：

好的，让我们举一些示例代码：

<body>
    <div id="content">
        I don't know, maybe height is less maybe not...
        <div class="clear"></div>
    </div>
</body>

或：

<body>
    <div class="wrapper">
        <div id="content">
            I don't know, maybe height is less maybe not...
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</body>

body {
    /* background image - height: 400px */
    backgroud: url('images/bg.jpg') repeat-x;
}

#content {
    backgorund: #0f0;
    margin: auto;
    width: 900px;
    margin-top: 150px;
}

.clear {
    clear: both;
}

.wrapper {
    width: 100%;
}

我希望在内容的左下角显示白色（例如），在右下方显示红色（例如）。底部意味着，当背景体结束时，到页面的末尾。如果我知道内容的高度，那么我可以插入一个绝对的div（右：0px;宽度50％。

Answer 1

以下是“只需添加代码”格式所需的结构：

上：全宽单格。

包含在div中的Bleft和C（现在让我们给它一个“容器”类。）

输入一个宽度为900像素的div。

Bright和D将具有与Bleft和C相同的结构。

然后创建一个从Bleft到D的新包装div，并将其标识为“main-container”。

然后对于CSS，将＃main-container设置为display:table，对于.container，设置#content set display:table-cell。

这应该让你开始。让我知道如何为您设置布局，如果您已经设置了此结构，则需要任何内容。

如何在左右两侧设置两种不同的颜色？

1 个答案: