两栏自适应布局

实现效果：一边固定，一边自适应
例子中左边宽度为定宽200px

float+overflow:hidden

#left-1 {    float: left;    background-color: red;}#right-1 {    overflow: hidden;    background-color: blue;}

padding+绝对定位

• 左边

.left-2{    position:absolute;    // margin-left: -200px;    height:400px;    width:200px;    background-color:blue;}.right-2{    padding-left:200px;    background-color:red;}

• 右边

.left-3{    position:relative;    padding-right: 200px;//留出右侧内边距    height:300px;    background-color:yellow;}.right-3{    position:absolute;//绝对定位到右边    right:0;    height:400px;    background-color:#808080;}

完整代码：

//html<div class="left" id="left-1"></div><div class="right" id="right-1"></div><div class="left" id="left-2"></div><div class="right" id="right-2"></div><div id="left-3">    <div class="right" id="right-3"></div></div>//css.left {    height: 300px;    width: 200px;}.right {    height: 200px;}#left-1 {    float: left;    background-color: red;}#right-1 {    overflow: hidden;    background-color: blue;}#right-2 {    padding-left:200px;    height:200px;    background-color:yellow;}#left-2 {    position:absolute;    width:200px;    background-color:green;}#left-3{    position:relative;    padding-right: 200px;    height:200px;    background-color:#800;}#right-3{    position:absolute;    right:0;    width:200px;    height:200px;    background-color:#808080;}