聖杯布局 和 雙飛翼布局

聖杯布局和雙飛翼布局的目的：

1.三欄布局，中間一欄最先載入和渲染（內容最重要）

2. 兩側內容固定，中間內容隨著寬度自適應

3. 一般用於 pc 網頁

聖杯布局實現思路：

1. 將最外層的container的padding 設定為 padding: 0 150px 0 200px; 為左右兩塊讓出空間；

2. 將.middle，.left ，.right 三者設為浮動；

3. 將middle 的 width設定為 100%;

4. 分別給.left設定margin-left,.right設定margin-right;將left 和right 拉到與middle同一水平；

5. 再用定位將左右位置設定好

聖杯布局具體**實現：

html**：

<

div 
class
="container"
>
<
div 
class
="middle"
>middle
div>
<
div 
class
="left"
>left
div>
<
div 
class
="right"
>right
div>
div>

.container.middle,.left,.right.left.middle.right

2. 給 middle 的width 設定為100%

3. 給.middle裡加乙個.middle-inner ,設定margin-left、margin-right,為.left 和 .right留出位置；

4.分別給.left 設定margin-left ,.right 設定margin-left,將.left和 .right拉到與.middle同一水平；

雙飛翼布局**實現：

雙飛翼布局和聖杯布局實現的相同點：

1. 都用了浮動  float:left;

2.都利用margin 負值，將兩邊拉到同一水平；

3. 將中間寬度width設定為100%;

雙飛翼布局和聖杯布局實現的區別：

1.聖杯布局用最外層container的padding為左右騰出空間。二雙飛翼布局是在中間middle裡加了乙個middle-inner,並為左右騰出空間；

2. 聖杯布局用到了定位position,二雙飛翼布局不需要用到；

聖杯布局 雙飛翼布局

前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...

聖杯布局和雙飛翼布局

一 聖杯布局 重點 content的padding，left的margin left和left值，right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...