Question

如何使用divs和css设置页面，每侧有背景图像，中间有页面内容。左侧和右侧都显示图像并根据窗口大小缩小/增长，而内容窗格始终保持相同的大小。

alt text

表格很容易，但我似乎无法想到它如何与div标签一起使用。

Answer 1

我想你会在这里找到一个很好的例子：http://matthewjamestaylor.com/blog/perfect-3-column.htm（听起来你的3列布局中可能没有太多内容，但它基本上是'3列布局'）这些例子应该是能够被修改为使中心面板具有固定的宽度，而其他面板可以调整。

编辑：这个特别是您正在寻找的内容：http://matthewjamestaylor.com/blog/split-page-3-column-liquid-layout.htm

Answer 2

嗯，这很有意思。我认为这可以满足您的需求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- Marc Thibault marc@smpro.ca --> 
    <title>Three accordion columns</title>

    <style>
        * {
            margin: 0; padding: 0;
        }

        #wrapper {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
        }

        #left {
            position: absolute; left: 0; top: 0;
            height: 100%;
            width: 50%;
            background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/12/750_police_women.jpg);
            background-color: yellow;
            background-repeat: repeat-y;
            z-index: 5;
        }

        #center {
            position: absolute; right: 0; left: 0; top: 0;
            margin: 0 auto;
            width: 600px;
            height: 100%;
            color: white;
            background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/11/cnews11thisone.jpg);
            background-color: blue;
            background-repeat: repeat-y;
            z-index: 10;
        }
        #right {
            position: absolute; top: 0; right: 0;
            width: 50%;
            height: 100%;
            color: white;
            text-align: right;
            background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/10/750_jerk_gets_bit.jpg);
            background-color: green;
            background-repeat: repeat-y;
            background-position: right top;
            z-index: 5;
        } 


    </style>

</head>
<body>
    <div id="wrapper">
        <div id="left">
            <p>This is Left</p>
        </div>
        <div id="right">
            <p>This is Right</p>
        </div>
        <div id="center">
            <p>This is Center</p>
        </div>
    </div>
</body>
</html>

Answer 3

有几种方法可以做到这一点：

有3个div：左，中，中，每个都有自己的背景颜色/图像。
在所有3个div后面的元素上设置单个背景图像。此图像可以垂直重复。在您的情况下，我还将背景颜色设置为黑色，以便左右列扩展。（有关Faux列的更多信息：http://www.alistapart.com/articles/fauxcolumns/）
还可以查看Sliding Doors（http://www.alistapart.com/articles/slidingdoors/）以获得更灵活的中间栏目。

三个背景图像

3 个答案: