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

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

左边自适应右边固定

1. 主要使用float和margin值

    
左边固定
    
右边自适应

.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值

    
左边固定
    
右边自适应

.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值

    
左边自适应
    
右边固定

.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值

    
左边自适应
    
右边固定

.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;
}