三欄布局（高度已知，中間自適應）

對於html 採用五種方法實現三欄自適應布局。

.box div 

.left 
.right 
.center

.box

.left
.center
.right

.box

.left
.center
.right

.box

.left
.center
.right

.box

.left
.center
.right

（1）、浮動：

缺點：脫離文件流，需要清除浮動

優點：相容性好

（2）、絕對定位：

缺點：因為其本身脫離了文件流，導致其子元素都脫離了文件流，使用性較差

優點：比較快捷

（3）、flex布局：

缺點：只相容到ie9

優點：目前比較完美的解決方案

（4）、table布局：

缺點：多欄布局時，某欄高度增加，會使其他欄高度一起增加，操作繁瑣對seo不夠友好

優點：相容性好，當需要去相容到ie8時可以使用**布局

（5）、網格布局：

新技術，**較少

如果高度不固定，則只有 flex 布局和**布局直接可用。

三欄布局，中間自適應

css left right centerdom 中間盒子放最後，不然佔位了右邊盒子就到下面去了 left right center中間的左右都要300px father left right center.father father div left right centertable不要寫錯了 ...

實現三欄布局中間自適應

前兩天看到乙個面試題，說是讓實現三欄布局，中間的自適應，如下圖所示 其實挺簡單的，但是換下順序，有好多人就懵逼了，包括我。這裡我總結兩種方法來實現 第一種 定位法 css container left right main html 如下 id container class left maindi...

兩欄自適應布局與高度自適應

float bfc 使用 float 讓 left 塊脫離文件流，使用 bfc 規則，讓 right 塊寬度自適應，如下 類似聖杯布局給父元素設定 padding left right 元素寬度 100 left 元素通過 設定 left 和 margin left 屬性拉取到前面 flexflex...