2列布局，内容宽度固定，背景宽度不受限制

Question

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

为了说明这种情况，我也拍了一张照片：

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

您怎么看？有更好的解决方案吗？

提前致谢
大卫

Answer 1

如果您想在bg时使用图像，则图像应至少为960px，第一个640px为一种颜色，右侧320px应为另一种颜色。

如果您希望bg跨越整个站点，那么您必须创建一个足够大的背景，以覆盖我提到的上述列尺寸的第一个1024px。将其添加到您的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;
}

如果您希望bg跨越整个网站，那么您必须创建一个足够大的背景，以覆盖我提到的上述列尺寸的第一个1024px。

Answer 2

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