聖杯布局的原理

in search of the holy grail

兩邊定寬，中間自適應的三欄布局，中間欄要放在文件流前面以優先渲染。

class="content">

class="center col">

div>

class="left col">

div>

class="right col">

div>

div>

css**

第一步：定義容器content的樣式padding: 0 100px，以及center，left，right的公共樣式，同時定義每個容器的顏色和寬度，左右固定一百，中間100%；

.content

.col
.left,.right
.left
.right
.center

第二步：採用負邊距將left和right放到左右兩邊

1. 當左右設定不同方向負邊距margin-left和margin-right

.left

.right

.left

.right

此時我們可以清晰的看到center的左右兩邊都被left和center遮擋，此時聖杯布局如何處理呢？

第三步：用相對定位來解決

1. 當左右設定不同方向負邊距margin-left和margin-right

.left

.left

.right

效果圖：

1. 當左右設定不同方向負邊距margin-left和margin-right

.content

.col
.left,.right
.left
.right
.center

.content

.col
.left,.right
.left
.right
.center

缺點：我的部落格，歡迎交流！

我的csdn部落格，歡迎交流！

前端筆記專欄

前端筆記列表

遊戲列表

posted @

2017-11-24 13:54

newman·li 閱讀(

...)

編輯收藏

聖杯布局的實踐

實踐了一下 css body container container column center left right footer ie6 fix html left ie7 fix first child html left 這樣能實現最簡單的三欄布局，並且三欄的高度自適應，根據裡面的內容來定。...

聖杯布局的實現

經典三列布局，也叫聖杯布局 holy grail of layouts 在國內也叫雙飛翼布局。它的布局有幾點要求 1 三列布局，兩邊寬度固定，中間寬度自適應 2 中間欄要在瀏覽器中優先展示渲染 3 允許任意列的高度最高 4 要求只用乙個額外的div標籤 5 要求用最簡單的css 最少的hack語句。...

聖杯布局詳解

樣式表很簡單，就是說你有乙個左邊的寬度為200px的列，右邊有乙個寬度為150px的列，中間的列自適應。核心的css 如下 這種方式能夠相容現在的許多主流瀏覽器，例如 safari,opera,firefox,and with the single rule hack at the bottom i...