CSS兩列布局

方法1:左邊設置絕對定位，右邊設置左外邊距，大小和左邊的寬度相等

//CSS部分：
        .contain{
            position :relative;
            height: 300px;
        }

        .left{
            position: absolute;
            left: 0;
            top: 0;

            width: 200px;
            height: 300px;
            background: red;
        }
        .right{
            /*使用左外邊距*/
            margin-left: 200px;
            height: 300px;
            background: blue;
        }

//html部分：
<div class="contain">
     <div class="left">左邊定寬</div>
     <div class="right">右邊自適應</div>
 </div>

方法2：左邊設置左浮動，右邊隱藏溢出的內容

.contain{
position :relative;
height: 300px;
}
.left{
float: left;
width: 300px;
height: 300px;
background:red;
}
.right{
overflow: hidden;
background: blue;
height: 300px;
}

<div class="contain">
     <div class="left">左邊定寬</div>
     <div class="right">右邊自適應</div>
 </div>

方法3：彈性佈局

.contain{
   display: flex;
}
.left{
    width: 200px;
    height: 200px;
    background: red;
}
.right{
    flex: 1;
    height: 200px;
    background:blue;
}

方法4：左右都設置浮動，width：calc（）

.contain {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #9dc3e6;
}

最終結果：