css-创建不同的颜色列的布局

如果你想看到列子的效果，可以尝试调整浏览器的大小，你会注意到，列颜色会随着窗口的边缘变化而变化。

注意：本教程的布局最小宽度（960px）

基础知识

这项技术背后的秘密3000像素的图片(不要担心它的大小 – 它只有360字节).

这图片将是两列布局的背景，能有效填充两列边缘间的空白。

The HTML

为了有效保持布局的灵活性，我们将这张背景图片放在一个容器中（#content-warpper），这样我们可以随时添加修改背景或加入页眉页脚。

<div id="content-wrapper"> 
	 <div id="content"> 
		 <div id="sidebar"></div> 
		 <div id="main-column"></div> 
	 </div>
</div>

The CSS

#content-wrapper{ 
width:100%;
 background:#fff url('split-bg.png') repeat-y top center;
 text-align:center;
}
 #content{ width:960px; margin:0px auto;
 text-align:left; overflow:auto;
} 
#sidebar{
width:260px; 
height:400px;
float:left;
background:#f5f5f5;
 } 
 #main-column{
 width:699px; 
height:400px;
 float:left;
 clear:right; 
background:#fff;
 border-left:1px solid #aaa;
 }

注意: 当你添加内容是，可以删除#main-column,#sidebar的高度。关键在背景图片的水平居中。