如何通過 CSS 實現一個左邊固定寬度、右邊自適應的兩列布局，css兩列

如何通過 CSS 實現一個左邊固定寬度、右邊自適應的兩列布局，css兩列

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

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

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

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 元素即可。

以上便是個人總結出的三種兩列布局方法，歡迎交流。

另外如果對百度 IFE 前端訓練營感興趣，歡迎來我的 repo 看看（笑）