两栏自适应布局

实现效果：一边固定，一边自适应
例子中左边宽度为定宽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;
}