先看看效果（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种布局的基本原理一致。
转载请注明出处，谢谢
 为什么需要自己写一个博客？)
方法的使用简介)
![python赋值语句的一般格式为_[零基础学Python]赋值，简单也不简单](http://pic.xiahunao.cn/python赋值语句的一般格式为_[零基础学Python]赋值，简单也不简单)
