CSS布局之浮动（二）
2008-08-15 19:25:37 来源：WEB开发网 闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹
闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�
婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹 闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姇閻忔氨鈧凹鍓熷娲垂椤曞懎鍓伴梺閫炲苯澧紒澶婄秺瀵濡歌閸嬫捇妫冨☉娆忔殘闂佷紮缍€娴滎剟鍩€椤掑倹鏆柛瀣躬瀹曚即寮借閺嗭箓鏌ㄩ悤鍌涘
在上一个文章里写了关于左（右）侧定宽右（左）侧自动缩放的两列浮动，这个文章就要说一下三列浮动的问题了。在之前说过，两列浮动是其他多列浮动的基础，明白了两列浮动的原理后，三列或三列以上的多列浮动也变得简单。
左侧中间定宽，右侧自适应：
因边左侧跟中间都是定宽的，只有右侧是自适应宽度的，所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理，HTML结构代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head>
<body>
<div id=”a”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</body>
</html>
只需在两列浮动的CSS样式代码上再做轻微的改动：
#a{float:left; width:200px; background:#aaa;}
#b{float:left; width:200px; background:#f00;}
#c{background:#777; margin-left:400px;}
当然这里要记住一点，那就是必须给b对象一个左浮动。
左侧自适应，中间右侧定宽：
与左侧中间定宽右侧自适应一样的道理，当然前提是要把a、b、c三个对象在HTML的结构代码上更换一下顺序，浏览器的解释顺序应该是c-b-a，因为浮动在未浮动之前：
<body>
<div id=”c”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”a”>我是右边</div>
</body>
CSS代码如下：
#a{background:#aaa;}
#b{float:right; width:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
左右两侧定宽，中间自适应：
这个布局应该是用得最多的，因为两边侧边栏的定宽，然后中间内容区自适应，这是很多网站常用的布局方式。很多人会在这里使用四个DIV来完成布局，即：
<body>
<div id=”a”>我是左边</div>
<div id=”box”>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</div>
</body>
通过一个嵌套的DIV来帮助完成三列浮动，这样的确是可以完成浮动布局的目的，但是不用这个嵌套仍然可以完成三列浮动的目的，既然可以省略一个嵌套，那为什么不省略一个呢？仅仅只需改变b跟c两者的顺序即可达到目的：
<body>
<div id=”a”>我是左边</div>
<div id=”c”>我是右边</div>
<div id=”b”>我是中间</div>
</body>
CSS代码如下：
#a{float:left; width:200px; background:#aaa;}
#b{margin-left:200px; margin-right:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
这样，在基于两列浮动的基础之上，三列浮动的布局也完成了。
出处：http://www.PRower.cn/technic/195
中查找“CSS布局之浮动（二）”更多相关内容
中查找“CSS布局之浮动（二）”更多相关内容更多精彩
赞助商链接
