雙飛翼布局與聖杯布局

dom結構：

main

left

right

思路：1.將div.container通過padding來設定左右的空閒位置來讓左右欄佔據，所以設定padding-left為左欄寬度，padding-right為右欄寬度。

2.讓三個元素統一左浮動，從左到右開始順序為main,left,right。

3.然後設定div.main的寬度為100%，讓它佔據container的一行內容。

4.設定左欄的margin-left為-100%，右欄margin-left為其width的負值，這樣左欄和右欄就會分別在main的左右兩邊

5.設定左右欄為相對定位，然後將左右欄定位到左右的空白處

聖杯布局

dom結構：

思路：與聖杯布局相類似，但因為雙飛翼布局，採取了div.main中巢狀乙個div.content，因此，利用div.content設定margin，來讓左右兩邊騰出位子來讓左右欄，就不需要使用相對定位了：

1.設定div.main的寬度為100%，讓它佔據container的一行內容。

2.讓三個元素統一左浮動，從左到右開始順序為main,left,right。

3.設定左欄的margin-left為-100%，右欄margin-left為其width的負值，這樣左欄和右欄就會分別在main的左右兩邊

4.div.content設定margin，來讓左右兩邊騰出位子來讓左右欄佔據。

聖杯布局與雙飛翼布局

聖杯布局和雙飛翼布局都是實現的三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在於其實現的思想。聖杯布局的出現是來自於a list part上的一篇文章in search of the holy grail。比起雙飛翼布局，它的起源不是源於對頁面...

雙飛翼布局與聖杯布局

中間層100 佔滿同一高度空間的整層寬度，左右兩層被擠出中間層所在區域時，使用margin left的負值將左右層拉回與中間層同一高度的空間 接著調整左右兩層到指定位置 最後使用margin或padding屬性調整中間層被左右層佔住的顯示區。聖杯布局採用乙個父層包含中間 左右三個子層，設定父層的pa...

雙飛翼布局與聖杯布局

怎麼設定min width我還沒搞懂 稍微說明一下 html 中 middle部分首先要放在container的最前部分。然後是left,right 1.將三者都 float left 再加上乙個position relative 因為相對定位後面會用到 2.middle部分 width 100 佔...