2列布局，内容宽度固定，背景宽度无限制答案

【问题标题】：2-column layout with fixed content width, unlimited background width2列布局，内容宽度固定，背景宽度无限制
【发布时间】：2011-02-08 23:57:41
【问题描述】：

我正在尝试为网站实现布局。实际上这是一个简单的 2 列布局，每列都有自己的背景颜色。然而，内容有一个固定的宽度，它应该居中。断点是背景，不应该受内容宽度的限制。

为了说明情况我还做了一张图：

我已经有了使用可以垂直平铺的居中背景图像的想法，但这种解决方案会使网站的最大宽度取决于图像的宽度。

你觉得怎么样，有没有更好的解决方案？

提前致谢
大卫

【问题讨论】：

标签： html css layout

【解决方案1】：

如果您想使用图像作为背景，则图像应跨越至少 960 像素，前 640 像素为一种颜色，右侧 320 像素应为另一种颜色。

如果您希望背景跨越整个网站，那么您必须创建一个足够大的背景，以跨越前 1024 像素，并具有上述我提到的列尺寸。将此添加到您的 CSS：

.wrapper {
    background:url("my image here") 0 0 repeat-y;
}

如果您只想使用颜色，只需为 CSS 中的每个 col 类设置以下属性：

col1 { background-color:#fff; }
col2 { background-color:#ccc; }

假设 HTML 结构如下：

<div class="wrapper">
    <div class="content">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>

试试下面的 CSS：

// This will create a wrapper across the entire page.
.wrapper {
    margin:0 auto;
    width:100%;
}

// This is your centered column
.content {
    float:left;
    width:960px;
}

// This is your first column
.col1 {
    background: **your background goes here
    float:left;
    width:640px;
}

// This is your second column
.col2 {
    background: **your background goes here
    float:left;
    width:320px;
}

如果您希望背景跨越整个网站，那么您必须创建一个足够大的背景以跨越前 1024 像素，并具有上述我提到的列尺寸。

【讨论】：

好的，这将创建一个固定宽度的 2 列布局。但是如何设置我的图片所示的背景。
@davidknezic，请参阅我答案底部的编辑。如果您使用的是纯色，请不要打扰图像，只需在每个 col 类中分配 bg 颜色即可。 col1 { 背景颜色：#fff; } 和 col2 { 背景颜色：#ccc;那将解决它。如果您想使用图像，请在答案底部查看我的编辑。
是的，我希望 bg 跨越整个网站（100% 的宽度）。在第一列的左侧，bg 应该是白色的，在第二列的右侧，它应该是灰色的。所以你认为我应该制作一个足够大的 bg 图像，包含两种颜色，我可以将其设置为 .wrapper 的居中背景？
@davidknezic，是的！还有另一种方法可以做到这一点，但这需要一些混乱的 HTML 和 CSS。所以我会创建一个大bg。我会将高度设为 1px 并重复 x。这是图像仍然很小，但它会给你两种颜色。
好的，但是不应该是repeat-y而不是repeat-x吗？

【解决方案2】：

YUI 为网格布局提供了非常好的解决方案，请检查它，看看它是否有帮助。 http://developer.yahoo.com/yui/grids/

【讨论】：

哇，快速创建网格布局真是太好了。但我不确定它是否能解决我的问题。