三列布局之聖杯布局和雙飛翼布局

簡單理解就是，頁面有三個等高的模組，左右兩個模組寬高固定，中間模組的寬度隨視口的變化而變化。

注意點：

為了保證中間模組正常顯示，需設定視口最小寬度

要保證中間列優先載入（所以不能單純用浮動解決）

在整體布局中，盡量少用絕對定位

html：

="container"

>
="center"
>center<
/div>
="left"
>left<
/div>
="right"
>right<
/div>
<
/div>1.設定body最小寬度，設定container的寬度為100%，讓左右模組左浮動，左右內邊距為左右模組的寬度
3.將左右模組「推出去」，使用相對定位即可，效果圖跟文章開頭一致
css：
body
.container
.center
.left
.right

="center"

>
="inner"
>
center
<
/div>
<
/div>
="left"
>left<
/div>
="right"
>right<
/div>由html可以看到，在center模組裡多加入了inner模組，目的就在於為center設定左右內邊距，為left模組和right模組騰出位置，讓inner作為真正的center模組。
1.設定body最小寬度，設定center的寬度為100%，讓左右模組左浮動，其左右內邊距為左右模組的寬度。
css：
body
.center
.left
.right
.inner

三列布局（聖杯布局和雙飛翼布局）

要求 1.兩邊固定 當中自適應 2.當中列要完整顯示 3.當中列要優先載入 header header content class clearfix middle middle middle middle middle middle middle middle middle left left ri...

布局 聖杯布局 雙飛翼布局

隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...

布局 聖杯布局和雙飛翼布局

聖杯布局和雙飛翼布局都是為了實現兩邊固定，中間自適應的三列的布局，他的中間欄優先渲染。聖杯布局與雙飛翼布局前面幾步相同 1.寫三個div，中間的那個div放在第乙個 優先渲染 2.給左中右設定浮動，分別設定高度，寬度，顏色 3.左邊模組讓它margin left 100 右邊模組margin lef...