聖杯布局是有**的工程師提出,巧妙的利用我們介紹過的定位技術、負邊距、相對定位、浮動、組合運用。輕鬆實現常見布局。
我們在前面介紹過,使用浮動特性,實現三列布局,但是使用div布局,有乙個問題,那就是內容區,在左邊區和右邊區之後渲染。下面我們使用聖杯布局的思路,實現乙個內容區渲染在前的三列布局。
(1)負邊距技術實現初步效果
可以參考負邊距定位章節,了解實現細節。
執行效果:
heder
center
left
right
footer
image.png
(2)利用padding實現,將center元素固定在中間
.container
執行效果:
image.png
(3)利用相對定位技術,將元素拉回左邊和右邊
left 新增如下樣式:
right 新增如下樣式:position:relative;
left:-200px;
執行效果:position:relative;
right:-200px;
image.png
3、布局缺陷
(1)左邊區塊和右邊區塊,利用了相對布局。
(2)內容區高度塌陷。
CSS聖杯布局
本文與之前 css雙飛翼布局 一文有些相似,在html結構上他們可以說是相同的。樣式主要表現為浮動 負邊距 定位。在 css雙飛翼布局 中,為了排開左右兩邊遮擋main元素的區域,是給main又新增了乙個子元素,用子元素來控制main所要顯示內容的寬度與位置,這是乙個不錯的方法,但從結構上來講,我們...
CSS經典布局 聖杯布局
廢話不多說,先上全部的 body container container column center left right footer ie6 fix html left 首先就是建立大體的布局,header footer container 給 container 乙個預設的padding le...
css布局之聖杯布局
聖杯布局 都為了實現乙個兩側寬度固定,中間寬度自適應的三欄布局。中間先載入渲染 實現思路 使用float布局框架 用margin為負值 position relative定位 優點 1 相容性好,相容若有主流瀏覽器,包括萬惡的ie6 2 可以實現主要內容的優先載入 實現 如下 div class c...