在前端面試中，經常會被問到兩欄佈局問題，即左欄寬度固定，右欄佔滿剩餘空間。

常見的實現方法有以下幾種，最後一種不推薦：

1. 對容器元素使用flex佈局，然後右側子容器使用flex-grow:1

2. 可以採用position的相關屬性，配合cacl來實現。

.wrapper{
    position: relative;
}
.left{
    width: 200px;
    height: 200px;
    background-color: green;
}
.right{
    position: absolute;
    top:0;
    left:200px;
    width
 
: calc(100% - 200px);
    box-sizing: border-box;        
}

3. 左側使用float:left，右側設定margin-left，margin-left的值為左側的寬度

4. 左右側的元素都使用display:inline-block，然後右側元素的width使用calc(100% - 左側寬度)，多個inline-block元素並排時會產生空白間隙，如下圖所示：

要解決該問題，需要在父元素上設定兩個css，如下

.wrapper{
font-size: 0 /*chrome下無效，因為chrome支援的最小字型為12號;在IE6/7下殘留1畫素間隙*/
letter-spacing: -3px
 
; /*負值可以去除所有瀏覽器的換行符間隙，但是，Opera瀏覽器下極限是間隙1畫素，0畫素會反彈，換行符間隙還原*/
}