css实现左边自适应右边固定

本文主要使用css实现左边自适应右边固定，右边固定左边自适应的问题。

左边自适应右边固定

1. 主要使用float和margin值

<div class="wrap">
    <div class="left_L1">左边固定</div>
    <div class="right_L1">右边自适应</div>
</div>

.wrap { width: 100%; height: 100px; margin-bottom: 20px; }
.left_L1 {
    width: 200px;
    height: 100px;
    background: green;
    float: left;
}
.right_L1 {
    margin-left: 200px;
    height: 100px;
}

2. 主要使用position定位结合margin值

<div class="wrap wrapL2">
    <div class="left_L2">左边固定</div>
    <div class="right_L2">右边自适应</div>
</div>

.wrapL2 {
    position: relative;
}
.left_L2 {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 0;
    left: 0;
    background: green;
}
.right_L2 {
    height: 100px;
    margin-left: 200px;
    background: red;
}

右边固定左边自适应

1. 主要使用float和负的margin值

<div class="wrap">
    <div class="left_R1">左边自适应</div>
    <div class="right_R1">右边固定</div>
</div>

.left_R1 {
    width: 100%;
    height: 100px;
    background: red;
    float: left;    
}
.right_R1 {
    width: 200px;
    height: 100px;
    background: green;
    float: right;
    margin-left: -200px;
}

2. 主要使用position定位结合负的margin值

<div class="wrap wrapL2">
    <div class="left_R2">左边自适应</div>
    <div class="right_R2">右边固定</div>
</div>

.wrapL2 {
    position: relative;
}
.left_R2 {
    width: 100%;
    height: 100px;
    background: yellow;
}
.right_R2 {
    width: 200px;
    height: 100px;
    margin-left: 200px;
    background: red;
    position: absolute;
    top: 0;
    right: 0;
}