CSS 布局實例系列（二）如何通過 CSS 實現一個左邊固定寬度、右邊自適應的兩列布局

最近在百度 IFE 訓練營中看見的一道題目：

用兩種不同的方法來實現一個兩列布局，其中左側部分寬度固定、右側部分寬度隨瀏覽器寬度的變化而自適應變化 

個人總結出如下三種實現思路：

1. 通過絕對定位實現

See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.

 注意點如下：

• • 需要套一個“positioned”的父元素
  • div-a 絕對定位，並將位置調整為瀏覽器左上角
  • div-b margin-left 屬性值為 div-a 的寬度（因為 div-a 絕對定位已經脫離文檔流，故不設定為 div-a 寬度的話，會相互覆蓋）
  • div-c 絕對定位並將位置調整為正下方
  • 需要自適應的 div 均設定寬度為100% 

　　2. 通過浮動實現

See the Pen float-two-column by xal821792703 (@honoka) on CodePen.

注意點如下：

• • div-a 設定為左浮動
  • div-b 與上面一樣需要將 margin-left 屬性值設為 div-a 的寬度，原因同上，浮動也會脫離文檔流
  • div-c 最好清除浮動，避免浮動的影響

3. 通過 BFC 規則實現

See the Pen bfc-two-column by xal821792703 (@honoka) on CodePen.

此處便不花大量篇幅介紹 BFC 了，可以參見下面兩篇博文：

深入理解BFC和Margin Collapse 

CSS之BFC詳解

簡而言之，BFC 可以幫助我們解決布局中左邊元素脫離文檔流后，右邊元素的左外邊距會觸碰到包含塊容器的左外邊框的問題，就像下圖：

現在我們僅需注意將 div-b 設定為 BFC 元素即可。

---

以上便是個人總結出的三種兩列布局方法，源代碼已同步至個人 repo，歡迎參考交流（笑）