左列
中间列
右列
6.7
CSS 基本布局类型
在学习本节之前，读者应该初步理解CSS 布局模型。实际上CSS 网页布局千变万化，本节不可能汇总全部布局类型，仅就个人体会把一些最基
本的常用布局类型梳理了一下，帮助读者理清思路，以便快速选择套用。
图6.66
令人高兴的是，最新版本的Dreamweaver CS3提供了一整套CSS 布局模板（共计31个），如右图所示。这对于熟练的网页设计师来说是件好事，但是对于初学者来说要读懂这些模板代码可能会存在一定困难：一是它提供的信息全部是英文，二是它展示的布局思路和提供的代码不适合初学者吸收学习。如果有了一定布局基础后再来阅读它提供的代码才会相得益彰，否则会让你迷失在代码之中而不识庐山真面目。因此，本节试图用最简洁的提示性说明和清晰的代码注释帮助初学者快速实现布局入门。
同时我也借用了 Dreamweaver CS3提供的部分模板简图以便辅助读者阅读代码。
为了抓住代码核心，本节没有设置页面版式属性，如字体、字号、颜色、行高等，以及基本盒模型属性，如margin 、padding 、border 、width 、height 和 background ，因为这些属性读者可以自己灵活添加，另一方面，最好不用它们，除非万不得已。如果不是这样的话，为了解决浏览器兼容问题，会产生一系列CSS 代码，影响效率和效果。
6.7.1 单行单列
单行单列是最简单的布局类型，我们可以使用流动布局、浮动布局或层布局快速实现。
l 如果位置固定、高度固定（如一些网站封面），使用层布局模型中的绝对定位会比较合
适；
l 如果高度不固定，使用绝对定位布局就不恰当，相反可以选择流动布局或浮动布局； l 如果要居中显示，则应选择流动布局模型。
例如，下面的代码是一个典型的单行单列居中布局样式。请输入下面的XHTML 结构代码：
CSS 布局代码：
/*[单行单列居中布局，参考示例6-42.html]*/
body { /*<清除窗口边距，定义居中显示>*/
margin:0px; padding:0px;
text-align:center; /*实现IE 浏览器居中*/ }
#content {/*<定义内容显示模块>*/ width:774px; /*固定宽度，也可以用百分比宽度*/
margin-left:auto; /*实现非IE 浏览器居中*/
margin-right:auto; /*实现非IE 浏览器居中*/
text-align:left; /*实现文本常规居左显示*/
图6.67
}
6.7.2
单行两列
单行两列布局类型比较常用，如个人博客页面多喜欢采用这种类型。单行两列可以用浮动布局或层布局实现，实现的方式也多种多样。例如，请先输入下面的XHTML 结构代码，然后我们逐个探讨：
l 浮动布局
例如，设计固定宽度，左列浮在左上角，右列浮在第一列右边，则CSS
布局代码如下：
/*[单行两列布局，固定宽度浮动布局，参考示例6-43_1.html]*/
body { /*<清除窗口边距，定义居中显示>*/
margin:0px; padding:0px;
text-align:center; /*实现IE 浏览器居中*/ }
#contain { /*<定义包含块属性>*/ width:774px; /*固定宽度*/ margin-right:auto;/*非IE 浏览器居中对齐*/
margin-left:auto;/*非IE 浏览器居中对齐*/
overflow:auto;/*非IE 浏览器自
图6.68
适应高度*/
text-align:left;/*文本居左对齐*/ }
#contain #content_l {/*<定义第1列属性>*/
float: left; /*向左浮动*/ width: 174px; /*固定宽度*/ }
#contain #content_r {/*<定义第2列属性>*/
float: right; /*向右浮动*/ width: 600px; /*固定宽度*/
}
图6.69
也可以用百分比定义列自适应宽度，但使用时要注意浮动错行问题，两列宽度总和不能超过包含块的宽度，要留出一定的空隙。如果左右两列
之和为百分之百，则margin 和border 不应设置值，保留默认值为0。
/*[单行两列布局，自适应宽度浮动布局，参考示例6-43_2.html]*/ #contain{/*<定义包含块属性>*/ width:100%; /*满屏显示*/ height:auto; /*在非IE 中高度自适应*/ }
#content_l{/*<定义第1列属性>*/ float:left;/*左列左浮动*/ width:40%;/*左列宽度*/ }
#content_r{/*<定义第2列属性>*/ float:right; /*右列右浮动*/
图6.70
width:60%;/*右列宽度*/ } .clear{
clear:both; /*<定义清除类>*/ }
也可以定义第2列向左浮动，紧挨第1列的右边浮动显示。
实际布局有时还会需要单列宽度固定，而另一列宽度自适应。此类布局也很简单，只需要定义浮动列宽度固定，而定义另一列为自适应流动环
绕分布即可，CSS 代码如下：
/*[单行两列布局，右列自适应宽度流动布局，参考示例6-43_3.html]*/ #contain{/*<定义包含块属性>*/ width:100%; /*满屏显示*/ height:auto; /*在非IE 中高度自适应*/ }
#content_l{/*<定义第1列属性>*/ float:left;/*左列左浮动*/ width:200px;/*左列固定宽度*/ } .clear{
clear:both; /*<定义清除类>*/ }
图6.71
上面的代码是定义左列宽度固定，右列自适应宽度。如果右列宽度固定，而左列自适应宽度，只需要设置第1列浮动向右即可。但要注意不能在XHTML 结构中调换两列模块的排列顺序。
浮动布局会遗留很多兼容性问题，不过可以通过Hack 技术进行克服，详细介绍可以参考第7章内容。另外一个主要问题就是浮动错行问题，这个问题比较普遍，因为浏览器窗口大小是不固定的，如果浮动宽度不够，就会跑到下一行交错显示。
解决此类问题，可以用margin-left 属性取负值，使左右栏换位显示，详细介绍可以参考4.3.1节中的示例4-19.html 。
l 层布局
也可以采用绝对定位，然后把左右列固定在左右两边。例如，请输入下
面的CSS 布局代码：
/*[单行两列布局，绝对定位的主要代码，其他代码可以参考示例6-44.html]*/
#contain #content_l {/*<定义第1列属性>*/
position:absolute; /*绝对定位*/ left:0px; /*左上角定位*/ top:0px; /*左上角定位*/ width: 20%; }
#contain #content_r {/*<定义第2列属性>*/
position:absolute; /*绝对定位*/ right:0px; /*右上角定位*/ top:0px; /*右上角定位*/ width: 80%; }
图6.72
如果页面宽度固定且居中显示，可以在包含块中添加相对定位属性，同时删除overflow 属性设置，主要CSS 代码如下：
/*[单行两列布局，绝对定位的主要代码，其他代码可以参考示例6-45.html]*/
#contain { /*<定义包含块属性>*/
position:relative; /*相对定位，必须设置，使其成为绝对定位元素的包含块*/
width:774px; /*固定宽度*/
margin-right:auto;
margin-left:auto;
text-align:left;
}
6.7.3 单行三列
单行三列是最常见的布局类型，一般网站都喜欢用这种布局，单行三列会使网站内容显得非常丰富。当然，三列布局也相对复杂。可以使用浮动布局或层布局实现，实现的样式也多种多样。
l 嵌套浮动布局
这种布局可以定义为自适应宽度。例如，请输入下面的XHTML结构代码：
然后，输入CSS布局代码：
/*[单行三列布局，嵌套结构的浮动布局，参考示例6-46.html]*/ #wrap{ /*<定义包含块属性>*/ width:100%;
height:auto; /*实现非IE 浏览器自适应高度*/ }
#column{ /*<定义左侧两列的子包含块>*/
float:left; width:60%; }
#column1{ /*<定义第1列宽度>*/ float:left; width:30%; }
#column2{ /*<定义第2列宽度>*/ float:right; width:30%; }
#column3{/*<定义第3列宽度>*/ float:right; width:40%;
.clear{/*<定义清除类，强迫包含块在非IE 浏览器中自适应高度>*/ clear:both; }
图6.73
l 并列浮动布局
该类型为固定宽度布局，XHTML 结构代码如下：
图6.74
CSS 布局代码：
/*[单行三列布局，并列结构的浮动布局，参考示例6-47.html]*/ body{/*<定义页面显示属性>*/ margin:0;
padding-left:180px; /*定义左侧补白为第1列宽度大小，用来装第1列栏目*/
padding-right:240px; /*定义右侧补白为第3列宽度大小，用来装第3列栏目*/
min-width:480px; /*定义在非IE 浏览器中最小窗口宽度，该值为第2列、第3列宽度之和*/ }
#center {/*<定义中间列显示属性>*/
width:240px; /*可以调整列宽度，但要相应调整第1列左边界、窗口最小宽度值*/ float:left; }
#left {/*<定义左列显示属性>*/ width:180px; float:left;
margin-left:-420px;/*该偏移宽度为左列和中间列宽度之和，注意取
值为负*/ }
#right {/*<定义右列显示属性>*/ width:240px; float:left;
margin-right:-100%;/*该偏移宽度为自身宽度，注意取值为负*/ }
l 并列层布局
这种布局类型可以定义为自适应宽度层布局，左右列为绝对定位，固定宽度，位置固定，中间列为自适应流动布局。例如，请输入下面的XHTML
结构代码：
图6.75
′
CSS 布局代码：
/*[单行三列布局，并列层布局，参考示例6-48.html]*/ body {/*<清除页面边距空隙>*/ padding:0; margin:0; }
#left { /*<定义左列显示属性>*/
position:absolute; /
*绝对定位
*
/
top:0px; /
*左上固定显示>
*
/
left:0px; /
*左上固定显示>
*
/
width:120px; }
#center {/
*<定义中间列显示属性>
*
/
padding-left:120px; /
*
留出左补白显示左栏内容，值要与左栏宽度一
致
*
/
padding-right:140px; /
*
留出右补白显示右栏内容，值要与右栏宽度
一致
*
/
}
#right {/
*<定义右列显示属性>
*
/
position: absolute; /
*绝对定位
*
/
top:0px; /
*右上固定显示>
*
/
right:0px; /
*右上固定显示>
*
/
width:140px;
}
三列布局样式比较多，你也可以根据页面需要适当调整布局形式。例如，三列都绝对定位，左列和右列固定宽度，中间列根据内容自适应。当然在页面整体布局中要尽量少用绝对定位，因为绝对定位的高度是固定的，它不能根据页面实现自适应高度。
6.7.4 多行多列
多行多列布局一般都是根据上面三种基本布局类型演化而来。实际上我们所看见的大部分页面布局都是多行多列的复杂结构，单纯的页面布局比较少。
l 两行两列
两行两列实际上是在单行两列基础上添加一行，添加行可以放在最上面，也可以放在最下面。例如，下面的这个两行两列固定宽度布局就是在顶部增加一行，XHTML结构代码如下：
CSS 布局代码：
/*[两行两列布局，参考示例6-50.html]*/
#header{/*<定义第1行布局属性>*/ width:774px; margin-right:auto; margin-left:auto; overflow: auto; }
#contain {/*<定义第2行布局属性>*/ width:774px; margin-right:auto; margin-left:auto;
overflow: auto; /*非IE 浏览器高度自适应*/ }
#contain #sub_1 {/*<定义第2行左列布局属性>*/ float: left; width: 274px; }
#contain #sub_2 {/*<定义第2行右列布局属性>*/ float: right;
图6.76
width: 500px; }
.clear{/*<定义清除类>*/
clear:both; /*强迫浏览器高度自适应*/
}
l 两行三列
与两行两列类似，如果在单行三列布局的顶部或底部增加另外一行就成了两行三列。例如，下面的示例就是两行三列自适应宽度布局，XHTML 结构代码如下：
CSS 布局代码：
/*[两行三列布局，参考示例6-51.html]*/
#header{/*<定义第1行布局属性>*/ width:100%; height:auto; }
#wrap{/*<定义第2行布局属性>*/
width:100%;
height:auto;
}
#column{/
*
<定义第2行前两列共同父
元素属性>
*
/
float:left;
width:60%;
}
#column1{/
*<定义第2行第1列属性>
*
/
float:left; width:30%; }
#column2{/
*<定义第2行第2列属性>
*
/
float:right; width:30%;
}
#column3{/
*<定义第2行第3列属性>
*
/
float:right; width:40%;
}
.clear{/
*<定义清除类>
*
/
clear:both;
}
图6.77
l 三行两列
下面是三行两列固定宽度布局，XHTML结构代码如下：
CSS 布局代码：
/*[两行三列布局，参考示例6-53.html]*/
#header{/*<定义第1行布局属性>*/ width:774px; margin-right:auto; margin-left:auto; overflow:auto; }
#contain {/*<定义第2行布局属性>*/ width:774px; margin-right:auto; margin-left:auto; overflow:auto; }
#contain #column1 {/*<定义第2行第1列布局属性>*/ float: left; width: 274px; }
#contain #column2 {/*<定义第2行第2列布局属性>*/ float:right; width:500px; }
#footer{/*<定义第3行布局属性>*/
图6.78
width:774px; margin-right:auto; margin-left:auto; overflow:auto; }
l 三行三列
三行三列实质上就是在两行三列的基础上增加一行，下面是三行三列自适应宽度布局，XHTML 结构代码如下：
CSS 布局代码：
/*[三行三列布局，参考示例6-54.html]*/
#header{/*<定义第1行布局属性>*/ width:100%; height:auto; }
#wrap{ /*<定义第2行布局属性>*/
width:100%;
height:auto;
}
#column{/
*
<定义第2行前两列布局属
性>
*
/
float:left;
width:60%;
}
#column1{/
*
<定义第2行第1列布局属
性>
*
/
float:left;
width:30%;
}
#column2{/
*
<定义第2行第2列布局属
性>
*
/
float:right;
width:30%;
}
#column3{/
*
<定义第2行第3列布局属
性>
*
/
float:right;
width:40%;
}
#footer{/
*<定义第3行布局属性>
*
/
width:100%; height:auto; }
.clear{/
*<定义清除类>
*
/
clear:both;
}
图6.79
6.7.5
伪列布局
伪列布局是一种比较特殊的布局方式，由Dan Cederholm 发明，并给它起了一个有趣的名字Faux Column 。伪列布局的出现缘于CSS 多列布局中
多栏高度难以统一的问题。
图6.80
例如，在右图所示的3行3列布局中，中间3列高度由于内容不同而呈现的背景参差
不齐。 为了解决这个问题，我们可以通过创建一个伪列（假设的列）来实现多列背景显示的统
一。 实现的思路是：先制作一个多列效果的背景图像，如图6.81所示，然后把它应用到多列布局的包含元素中。由于包含元素的高度会适应内部高度最大的一列，所以它的背景图像会垂直平铺到每一列的下面，这样就让人觉得每列的背景统
一了。
例如，先制作Faux 列背景图像。
然后，输入下面的XHTML 结构代码。
最后，输入CSS代码：
/
*[3行3列Faux列布局，参考示例6-56.html]
*
/
* {/
*
<清除所有元素的边界和补白>
*
/
padding: 0; margin: 0; }
body {/
*<定义页面属性>
*
/
font-family: "宋体", Arial, Helvetica, sans-serif; font-size: 13px;
}
#wrapper {/
*<定义布局总外套属性>
*
/
margin: 0 auto; width: 922px; }
#header {/
*<定义页眉属性>
*
/
width: 902px;
padding: 10px;
height: 100px;
background: #ABBEBE; }
#main {/
*<定义Faux列容器属性>
*
/
background: url(faux-3-col.gif); /
* Faux列背景图像
*
/
margin-bottom: 0px;
overflow: auto; /
*自动适应高度
*
/
width: 100%; /
*宽度
*
/
}
#leftcolumn {/
*<定义左栏属性>
*
/
display: inline;
float: left;
width: 195px;
background:#D1DBDB; }
#content {/
*<定义中间栏属性>
*
/
float: left;
width: 460px;
display: inline;
position: relative; background:#F2F2E6; }
#rightcolumn {/
*<定义右栏属性>
*
/
display: inline;