【css】兼容，简洁的自适应布局 

 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" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title></title>
 6     <style type="text/css" rel='styleshreet'>
 7     *{margin:0; padding:0;}
 8     #main{width:80%; overflow: hidden; margin:0 auto;}
 9     #nav{ float: left; width: 200px; height:500px; background: red;}
10     #content{_float:left; height: 500px; width:auto;  background: #690; }
11     #sidebar {float: right; width: 150px; height: 500px;background:#721;}
12     #div1{width: 100%;}
13 
14     </style>
15 </head>
16 <body>
17     <div id = 'main'>    
18             <div id="nav">1定义mainer右边距为边栏空出了相应的空间，使得侧边栏放置在了它应该出现的位置。</div>
19             <div id='sidebar'>3定义mainer右边距为边栏空出了相应的空间，使得侧边栏放置在了它应该出现的位置。</div>
20             <div id="content"><div id= 'div1'></div></div>
21     </div>
22 </body>
23 </html>

这是3列中间自适应

把sidebar注释了 就是2列自适应了。

posted @ 2013-01-05 10:52  ic-  阅读(209)  评论(0)  编辑  收藏  举报