<span id="mce_marker" data-mce-type="bookmark"></span><span id="__caret">_</span> <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css" rel='styleshreet'> *{margin:0; padding:0;} #main{width:80%; overflow: hidden; margin:0 auto;} #nav{ float: left; width: 200px; height:500px; background: red;} #content{_float:left; height: 500px; width:auto; background: #690; } #sidebar {float: right; width: 150px; height: 500px;background:#721;} #div1{width: 100%;} </style> </head> <body> <div id = 'main'> <div id="nav">1定义mainer右边距为边栏空出了相应的空间,使得侧边栏放置在了它应该出现的位置。</div> <div id='sidebar'>3定义mainer右边距为边栏空出了相应的空间,使得侧边栏放置在了它应该出现的位置。</div> <div id="content"><div id= 'div1'></div></div> </div> </body> </html>
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列自适应了。