先看看效果（1）左边固定宽度，右边自适应
<!DOCTYPE html> <html> <head> <title>shengbei</title> <meta charset="utf-8" /> <style type="text/css"> *{ margin:0px; padding: 0px; } p{ padding: 20px; } #container{ margin:0 auto; width: 1000px; overflow: hidden; padding-left: 210px; text-align: center; } #main{ float: left; width: 100%; background: yellow; } #aside{ float: left; margin-left:-100%; width: 200px; position:relative; left:-210px; background: red; } </style> </head> <body> <div id="container"> <div id="main"><p>主栏目</p></div> <div id="aside"><p>左侧栏目</p></div> </div> </body> </html>
基本原理：1.首先在一个大的container里包含2个div；
2.设置主窗口左浮动float，且窗口宽度为100%；（主窗口占据div的全部宽度，这样左窗口即使浮动也会被挤压到下一行，第2步解决该问题）
3.设置左侧窗口左浮动float，设置左外边距为-100%；（这样可以使左窗口与主窗口在一行上，但是此时左窗口会覆盖主窗口一部分，第4’5步解决该问题）
4.设置container容器的padding-left为210px，稍微大于左窗口，同时留出2个窗口的外边距
5.最后设置左窗口的的位置position设置为relative，left=-210px，使其紧靠container的左侧，同时与主窗口有一定的外边距。
再看效果（2）右窗口固定宽度，主窗口自适应
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title></title> <style type="text/css"> *{ padding: 0px; margin:0px; } p{ padding: 20px; } #container{ width:1000px; margin:0 auto; padding-right: 210px; } #main{ width:100%; float: left; background: red; } #aside{ float: left; width:200px; margin-left: -200px; background: yellow; position: relative; right:-210px; } </style> </head> <body> <div id="container"> <div id="main"><p>主栏目</p></div> <div id="aside"><p>测栏目</p></div> </div> </body> </html>
基本原理：
1.首先在一个大的container里包含2个div；
2.设置主窗口左浮动float，且窗口宽度为100%；（主窗口占据div的全部宽度，这样右窗口即使浮动也会被挤压到下一行，第2步解决该问题）
3.设置右窗口左浮动float，设置左外边距为-200px；（这样可以使右窗口与主窗口在一行上，但是此时右窗口会覆盖主窗口一部分，第4’5步解决该问题）
4.设置container容器的padding-left为210px，稍微大于左窗口，同时留出2个窗口的外边距
5.最后设置左窗口的的位置position设置为relative，left=-210px，使其紧靠container的左侧，同时与主窗口有一定的外边距。
2种布局的基本原理一致。
转载请注明出处，谢谢
