固定宽度布局
单列布局
固定宽度的单列布局中，外层指定宽度（假设没指定宽度，会自己主动伸展），设置 margin: 20px auto; 实现居中就可以。
HTML结构：
单列固定宽度 Page Header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Page Header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } .warp{ border: 1px solid black; width: 760px; margin: 10px auto; } .warp h2{ background-color: #666; padding: 20px 20px 10px; margin: 0; } .warp .main{ background-color: #999; padding: 10px 20px; } .warp .footer p{ background-color: #CCC; color: #888; text-align: right; display: block; padding: 10px 20px 20px; margin: 0; } 1-2-1 布局
实现固定宽度的 1-2-1 布局有两种方式，一种是使用 absolute 定位，一种是使用 float 布局。
HTML结构：
1-2-1 固定宽度 Header
Content Header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Side Header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
CSS：
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 760px; margin: 10px auto; } #header{ border: 1px solid black; background-color: #666; } #footer{ border: 1px solid black; background-color: #CCC; } 1）使用 absolute 定位：用这样的方法仅仅须要确定当中一列的宽度，并设为 absolute: absolute; 还有一列使用margin 定位。 注意父元素设为 position:relative; 并且设为 absolute 的列必须比还有一列高度小。
#container{ position: relative; } #content{ border: 1px solid black; background-color: #999; width: 500px; position: absolute; top: 0; left: 0; } #side{ border: 1px solid black; background-color: #999; margin-left: 520px; } 2）使用float 定位：使用这样的方法两列都必须设置宽度，而且要在最后加一个空的元素 <div id="clear"></div> #content{ border: 1px solid black; background-color: #999; width: 500px; float: left; } #side{ border: 1px solid black; background-color: #999; width: 250px; float: right; } #clear{ clear: both; } 1-3-1 布局
所用方法与 1-2-1 布局一样，这里不再赘述
1-((1-2)+1)-1 布局
HTML 结构：
CSS：1-((1-2)+1)-1 固定宽度 Header
Content Header
Column1 Header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Column2 Header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Side Header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 760px; margin: 10px auto; } #header{ border: 1px solid black; background-color: #666; } #footer{ border: 1px solid black; background-color: #CCC; } /*使用 float 布局*/ #content{ width: 500px; float: left; } #side{ border: 1px solid black; background-color: #999; width: 240px; float: right; } #clear{ clear: both; } #contentHeader{ border: 1px solid black; background-color: #999; } #columns{ margin: 10px 0; } #column1{ border: 1px solid black; background-color: #999; width: 250px; float: left; } #column2{ border: 1px solid black; background-color: #999; width:210px; float: right; }