已知

<html>
<head>
    <title>二列布局</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .outer{ 
        }
        .inner {
            height: 300px; 
        }
        .left{
            background-color: yellowgreen;
            width: 200px; 
        }
        .right{
            background-color: burlywood; 
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner left"></div>
        <div class="inner right"></div>
    </div>
</body>
</html>

需要调整成

1.flex布局 + flex:1

.outer{ 
    display: flex; /*设置弹性盒子*/
}
.inner {
    height: 500px;
}
.left{
    background-color: yellowgreen;
    width: 200px; 
}
.right{
    background-color: burlywood; 
    flex:1 /*父容器剩下的内容都分配给右边*/
}

2.浮动：float: left + margin-left

left元素浮动，右边元素则margin设置边距margin-left:200px即可。

.inner {
    height: 500px; 
}
.left{
    background-color: yellowgreen;
    width: 200px;  
    float: left;
}
.right{
    background-color: burlywood;   
    margin-left: 200px;
}

2.1浮动：所有都float: left + width: calc(100% - 200px)

两个子元素都设置float:left, 由于float会不断往左挤压，所以right的宽度必须动态计算 calc(100% - 200px)

.outer{ 

}
.inner {
    height: 500px; 
    float: left;
}
.left{
    background-color: yellowgreen;
    width: 200px;  
}
.right{
    background-color: burlywood;  
    width: calc(100% - 200px);
}

2.2浮动：float:left + overflow：hidden

通过left浮动+ 右侧使用overflow：hidden 创建BFC，格式化上下文。

.outer{  
}
.inner {
    height: 500px; 
}
.left{
    background-color: yellowgreen;
    width: 200px;  
    float: left;
}
.right{
    background-color: burlywood;  
    overflow: hidden; /*打开BFC */
}

3.绝对定位absolutte + left:0 + margin-left 200px

左边left设置绝对定位，右边margin-left：200px偏移显示即可

.outer{ 
    position: relative;
}
.inner {
    height: 500px;
}
.left{
    background-color: yellowgreen;
    width: 200px; 
    position: absolute;
    left: 0;
}
.right{
    background-color: burlywood;
}

3.1绝对定位全部absolutte + right:0+ right:200， + calc(100%-200px)

.outer{ 
    position: relative;
}
.inner {
    height: 500px;
    position: absolute;
}
.left{
    background-color: yellowgreen;
    width: 200px; 
    left: 0;
}
.right{
    background-color: burlywood; 
    left: 200px;
    width: calc(100% - 200px);
}

4.网格 grid + grid-template-columns: auto 1fr

.outer{ 
    display: grid;
    grid-template-columns: auto 1fr;
}
.inner {
    height: 500px; 
}
.left{
    background-color: yellowgreen;
    width: 200px;  
}
.right{
    background-color: burlywood; 

}

5. display:table + table-cell

设置父容器为table类型，同时必须设置宽度width：100%。
子元素为table-cell
剩下未设置则为所有父容器剩余空间

.outer{  
    display: table;
    width: 100%;
}
.inner {
    height: 500px; 
    display: table-cell;
}
.left{
    background-color: yellowgreen;
    width: 200px;  
}
.right{
    background-color: burlywood;  
}

6. inline-block margin-right:-xx

设置子元素为 inline-block，利用ifc 格式化上下文
父容器设置 font-size: 0;

.outer{ 
    font-size: 0; /* 字体大小会影响 行内元素的宽高 */
}
.inner {
    height: 500px;
    display: inline-block;/* 设置为行内块  */
}
.left{
    background-color: yellowgreen;
    width: 200px; 
}
.right{
    background-color: burlywood; 
    width: 100%; 
    margin-right: -200px; /*通过设置 margin-right 宽度会自减 -200px */
}

css 两列布局

已知