利用定位法实现宽度自适应布局

1.两侧固定，中间自适应

<style>
.contain{
position: relative;
height: 200px;
padding-left: 200px;
padding-right: 200px;
}
.left{
width: 200px;
height: 150px;    
left:0;
top:0;
position: absolute;
background-color: lime;
}
.right{
width: 200px;
height: 150px;
right:0;
top:0;
position: absolute;
background-color: lime;
}
.center{
width: 100%;
height:100%;
background-color: red;
}
</style>
    


<div class="contain">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

2.左侧固定，右侧自适应

<style>

.contain{

position: relative;

height: 200px;

padding-left: 200px;

}

.left{

width: 200px;

height: 150px;  

left:0;

top:0;

position: absolute;

background-color: lime;

}

.right{

width: 100%;

height:100%;

background-color: red;

}

</style>

    

 

<div class="contain">

    <div class="left"></div>

    <div class="right"></div>

</div>

3.右侧固定，左侧自适应

<style>
.contain{
position: relative;
height: 200px;
padding-right: 200px;
}
.right{
width: 200px;
height: 150px;    
right:0;
top:0;
position: absolute;
background-color: lime;
}

.left{
width: 100%;
height:100%;
background-color: red;
}
</style>
    


<div class="contain">
    <div class="left"></div>
    <div class="right"></div>
</div>