具有固定内容宽度，无限背景宽度的2列布局

Question

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

为了说明我还做了一个图片的情况：

我已经有主意，用一个居中的背景图片，我可以垂直平铺，但是这种解决方案能够使网站的最大宽度取决于图像的宽度。

您认为，有没有更好的解决方案？

在此先感谢
大卫

Answer 1

如果你想使用图片作为你BG，然后将图像应跨越至少960像素，第640像素是一个颜色，右320px的应该是其他颜色。

如果你想让bg跨越整个网站，那么你必须创建一个足够大的背景来跨越前面提到的列尺寸的第一个1024像素。添加到您的CSS：

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

如果你想使用的颜色而已，只是设置以下属性为每个col类的CSS：

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跨越整个站点，那么你必须创建一个足够大的背景来跨越前面提到的列尺寸的第一个1024像素。

Answer 2

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