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