CSS floats创建三栏网页布局
三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。f/R[,C,BH I e0xpg:\S[#\:Ht q
绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”（它可以根据用户浏览器窗口宽度自动伸缩）布局的网页。0Rn`A+M0M+c p
现在，我们都开始抛弃基于表格的布局技术，许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从 CSS中得到固定宽度的布局并不困难；但是得到液态布局就有点困难了。因此，本文介绍一种用CSS的float和clear属性来获得三栏液态布局的方法。URv @1?&bS@ A
[b]基本方法[/b] u)P_9? WL
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。
[b]三栏布局的一个例子[/b]
请看看用本文所介绍的技术进行三栏布局的例子。
这个例子用鲜艳的颜色来区分布局的各个div。9C j:or R C]}P0G
[b]XHTML代码：[/b] o.O8o|$u&@
Example Source Code [0oy;aN0i
[code]
<body>:@1i e.O[
<div id="header">$Upl1S ~
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>?u^&l6x c/{_ H-^-s
<div id="right">
Starboard side text...DYz i+bS
</div> W,a ZYr#Ol,P#J:o-s.S
<div id="middle">Z/k:{ b(D!g2u(f w
Middle column text...#J-jnb(P4M
</div>
<div id="footer">k#m f(ep-B$Us#a
Footer text...
</div>
</body>
[/code]w KtZ[p3X/@
[b]下面是CSS代码[/b]：
Example Source Code %y'_rw'OD*q
[code]
body {
margin: 0px;Pi[ z)s4f.u5{3ck&G-Q
padding: 0px;r3N5G ~_G'j
}
div#header {0h g,x T,~%L
clear: both;
height: 50px;
background-color: aqua;Js.K'{ ?{S _6e
padding: 1px;
}
div#left {
float: left;
width: 150px;8rJ"J5Q+?w2V
background-color: red;
}
div#right {;B6W/~0eF*{%M
float: right;"ql~ i-?b _p i+F
width: 150px;
background-color: green;
}
div#middle {l H;vf)qy&_n-}"@
padding: 0px 160px 5px 160px;
margin: 0px;4A-J.O^ vr
background-color: silver;'l^_'Zb7Zr*V
} ebV0` \ E%eQ.N6K
div#footer {6~yx6em[
clear: both;*O\ KII-` Ni X
background-color: yellow;f;zv @,K DI
} @Z d v/j)n.p2cn _2c
(z?V(Y6x*lmQ\
~s [9j3l OmX
%@+LM$P&S XF e
[/code]
页:
[1]