聖杯布局和雙飛翼布局的：
◇ 三欄布局，中間一欄最先載入和渲染（內容最重要）
◇ 兩側內容固定，中間內容隨著寬度自適應
◇ 一般用於pc網頁，其父元素的高度始終是三欄中高度最高的元素
聖杯布局和雙飛翼布局的技術總結：
◇ 使用float布局
◇ 兩側使用margin負值，以便和中間內容橫向重疊
◇ 防止中間內容被兩側覆蓋，乙個用padding，乙個用margin；
聖杯布局title
>
type
="text/css"
>
body
#header
#container
#container .column
#center
#left
#right
#footer
/* 手寫 clearfix */
.clearfix:after
style
>
head
>
>
"header"
>
this is headerdiv
>
"container"
class
="clearfix"
>
"center"
class
="column"
>
this is centerdiv
>
"left"
class
="column"
>
this is leftdiv
>
"right"
class
="column"
>
this is rightdiv
>
div>
"footer"
>
this is footerdiv
>
body
>
html
>
雙飛翼布局title
>
type
="text/css"
>
body
.col
#main
#main-wrap
#left
#right
style
>
head
>
>
"main"
class
="col"
>
"main-wrap"
>
this is main
div>
div>
"left"
class
="col"
>
this is left
div>
"right"
class
="col"
>
this is right
div>
body
>
html
>
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 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...