最近在忙著各種面試，筆試，碰到這樣的問題比較多，打算在這里記錄下自己對兩列布局的一些實現方法的總結

下面我將用三個方法實現左欄固定，右欄自適應寬度的布局

兩列布局

<div class="parent">
     <div class="side"></div>
     <div class="main"></div>
</div>

1.Flex

.parent{
    display: flex;
}

.side{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    background: #555;
}

.main{
    flex: 1;
    background: #ddd;
}

flex 默認有三個屬性 flex-grow , flex-shrink 和 flex-basis,默認值為 0 | 1 | auto

2.Position

.parent{
    position: relative;
}

.side{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    background: #555;
}

.main{
    height: 200px;
    position: absolute;
    left: 210px;
    right: 0;
    background: #ddd;
}

.main 寬度為默認值 auto，占據整行并根據left、right調整

3.Float

.parent{  
}

.side{
    width: 200px;
    height: 200px;
    float: left;
    background: #555;
}

.main{
    height: 200px;
    margin-left: 210px;
    background: #ddd;
}

具體使用哪一種方式，還是根據實際情況選擇