css-3列布局

三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'margin'属性.并且'中间'部分不用设置'width'.例如:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <style>
 6 body { margin:0;}
 7 #content { width:470px; margin:0 auto;}
 8 #left { background: #99FF99; height: 300px; width: 120px; float: left; }
 9 #right { background: #99FF99; height: 300px; width: 120px; float: right; }
10 #center { background: #99FFFF; height: 300px; margin:0 120px; }
11 </style>
12 </head>
13 <body>
14 <div id="content">
15   <div id="left">此处显示 id "left" 的内容</div>
16   <div id="right">此处显示 id "right" 的内容</div>
17   <div id="center">此处显示 id "center" 的内容</div>
18 </div>
19 </body>
20 </html>
View Code

 的运行结果为:

posted @ 2014-12-31 22:53  wonkju  阅读(160)  评论(0)  编辑  收藏  举报