左邊固定，右邊自適應常見方式總結

左邊固定，右邊自適應常見方式總結

html結構以下：

<div class="parent">
    <div class="left">我是左邊固定</div>
    <div class="right">我是右邊自適應</div>
</div>

 

(1)左邊向左浮動並固定寬度，右邊給margin-left    (注：右邊這個div必定不能給width:100%)

.parent{
    width:100%;
    height:400px;
}
.left{
    float:left;
    width:200px;
    height:100%;
    background:#afa;
}
.right{
    height:100%;
    margin-left:200px;
    background:yellow;
}

 （2）父元素相對定位，左邊絕對定位並給固定寬度，右邊margin-left   (注：右邊這個div必定不能給width:100%)

 

.parent{
    position:relative;
    width:100%;
    height:400px;
}
.left{
    position:absolute;
    left:0;
    width:200px;
    height:100%;
    background:#afa;
}
.right{
    margin-left:200px;
    height:100%;
    background:#aba;
}

 

(3)使用flexbox,父元素display:flex,左邊元素固定寬度，右邊必定記得加flex:1

.parent{
    width:100%;
    height:400px;
    display:flex;
}
.left{
    width:200px;
    background:#afa;
}
.right{
    flex:1;
    background:yellow;
}

 （3）父元素相對定位，且須要設置padding-left,左邊的元素絕對定位且爲固定寬度，右邊的元素須要設置width:100%

.parent{
    width:100%;
    height:400px;
    padding-left:200px;
    position:relative;
}
.left{
    position:absolute;
    left:0;
    width:200px;
    height:100%;
    background:#afa;
}
.right{
    width:100%;
    height:100%;
    background:#aba;
}