1

我想要这个布局：

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

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

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

当“内容”固定为 900 像素并居中（边距：自动）时，我必须进行设置，并且必须考虑不同的显示器宽度。“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%;
}

我想在内容的左下角获得白色（例如），在右下角获得红色（例如）。底部的意思是，当背景正文结束时，到页面的末尾。如果我知道内容的高度，那么我可以插入一个绝对值（右：0px；宽度为 50%）的 div。

4

1 回答 1

3

这是您需要的结构，采用“只需添加代码”格式：

顶部：全宽单个 div。

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

内容为 900 像素宽度的单个 div。

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

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

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

这应该让你开始。让我知道布局如何为您锻炼，以及一旦您设置了此结构，您是否需要任何东西。

于 2012-11-28T23:49:45.167 回答