CSS聖杯布局(雙飛翼布局)

2021-09-19 09:58:25 字數 899 閱讀 1149

我在網上看了有關於css聖杯布局的文章,有很多直接丟**給效果,看得我雲裡霧裡。首先按我的理解來講述一下聖杯布局吧。首先他的作用就是:像**網那樣,中間先渲染,兩邊後渲染,其次中間的內容是自適應高度的。最好的例子就是**網了。

樣式:1.三列布局

2.中間板塊先渲染,自適應高度寬度

3.兩邊定寬

那我們就開始實現,

html**

頭部

這是中心內容板塊,最先渲染的塊。

左邊區域

右邊區域

尾部

css布局,我就不一步一步的實現怎麼來的,自己來做一遍就理解了。這其中的幾個需要注意的點,首先是:當元素浮動過後,不再撐滿父元素,我是再父元素上使用.container的方式來實現,然後是注意浮動之後由於三個板塊的寬度太大,大於了父元素的寬度,那就需要使用對兩側元素使用負邊距的方式了#left,#right,剩下的就看自己或者業務的需求來設計.

header,footer

.container

#content,#left,#right

#content

#left,#right

#left

#right

這是我做出來的效果

如上述有不足的請多多指正啦,也算自己學習的乙個筆記,嘿嘿嘿……

CSS布局 聖杯布局 雙飛翼布局

聖杯布局和雙飛翼布局解決的都是兩邊頂寬 中間自適應的三欄布局問題,要實現中間部分優先渲染。先上兩個demo。聖杯布局 雙飛翼布局 兩者的異同 首先如開題所述,兩種布局解決的問題是一樣的,只是實現方式有些微小的差別 兩者都採用了向左浮動的方式,還用實現布局的重點都是負邊距的使用 聖杯布局使用固定的左右...

CSS 聖杯 雙飛翼布局

html結構 123 123123 css container 把左右兩邊距離空出來 containercenter 設定widh為100 即充滿整個容器 center浮動 設定left,center,right左浮動。清除container浮動,保證後面的div正常布局 left,center,r...

聖杯布局 雙飛翼布局

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