兩列布局 左側寬度固定，右側寬度自適應的兩種方法

今天做了乙個練習，要求用兩種方法來實現左側寬度固定、右側寬度自適應的兩列布局。一開始我以為會很簡單，畢竟只是練習，但是我寫出了一種方法之後卻沒能順利的寫出第二種方法。對於網上的一些解決方法我還是不太滿意，於是自己繼續琢磨著，問問一些前輩，希望得到一些思路。終於，皇天不負有心人，在自己翻譯的一篇關於bfc的文章上，我找到了解決的方法。

關於左側寬度固定，右側寬度自適應兩列布局

的一種很常用的方法我相信大家都知道。就是利用

左側元素

浮動，或者絕對定位的方式使其

脫離常規文件流，讓兩個塊級元素能夠在同一行顯示。然後右側元素 margin-left 的值等於左側元素寬度，這時右側元素將緊挨著左側元素，由於塊元素的寬度會自動預設充滿剩下的螢幕，所以就實現了右側自適應的效果了。

html**如下：

doctype

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
link 
rel="stylesheet"
href
="test.css"
type
="text/css"
>
head
>
<
body
>
<
div 
class
="one"
>
div>
<
div 
class
="two"
>第一種方法
div>
body
>
html
>

.one .two

第二種方法，我利用的是建立乙個新的bfc（塊級格式化上下文）來防止文字環繞的原理來實現的。bfc就是乙個相對獨立的布局環境，它內部元素的布局不受外面布局的影響。它可以通過以下任何一種方式來建立：

關於bfc，在w3c裡是這樣描述的：在bfc中，每個盒子的左外邊框緊挨著包含塊

的左邊框

（從右到左的格式化時，則為右邊框緊挨）。即使在浮動裡也是這樣的（儘管乙個包含塊的邊框會因為浮動而萎縮），除非這個包含塊的內部建立了乙個新的bfc。這樣，當我們給右側的元素單獨建立乙個bfc時，它將不會緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。

html**：

doctype

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
link 
rel="stylesheet"
href
="test.css"
type
="text/css"
>
head
>
<
body
>
<
div 
class
="one"
>
div>
<
div 
class
="two"
>第二種方法
div>
body
>
html
>

.one .two

以上僅是個人一些

左側寬度固定，右側寬度自適應

實現左側寬度固定，右側寬度自適應的布局有很多，這裡介紹幾種方式 方式一 左側盒子寬度設定為100畫素，並且設定為左浮動，右側的盒子不設定寬度，只是設定個margin left值就可以了，如下 左側右側 但是以上辦法，如果設定為右側，固定左側自適應的布局是不可以的，如果想實現這樣的布局可以設定把兩個盒...

左側固定寬度，右側自適應寬度的CSS布局

第一種方法 關於這個布局，作者是這樣說明的 left和right都貼住左側。設定left在right上面 z index 在right內加個放內容的層 content 設定content距離right的左側為200px，即剛巧等於left的寬度。這個布局有乙個缺點就是，如果我設定了foot的div，...

CSS 實現兩欄布局，左側固定寬度，右側自適應

1 flex 實現 doctype html 實現兩欄布局 title html,body content left right content div style head content left 這是第乙個div div right 這是第二個div div div body html 2 f...