布局要求：
1、三列布局，中間寬度自適應，兩邊定寬
2、中間欄要在瀏覽器中優先展示渲染
3、允許任意列的高度最高
4、用最簡單的css、最少的hack語句
聖杯布局：
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>聖杯布局
title
>
<
style
type
="text/css"
>
* body
.header,
.footer
.container
.left,
.middle,
.right
.middle
.left
.right
style
>
head
>
<
body
>
<
div
class
="header"
>
頭
div>
<
div
class
="container"
>
<
div
class
="middle"
>中
div>
<
div
class
="left"
>左
div>
<
div
class
="right"
>右
div>
div>
<
div
class
="footer"
>
尾
div>
body
>
html
>
雙飛翼布局：
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
type
="text/css"
>
* body
.header,
.footer
.sub, .main, .extra
.main
.main-inner
.sub
.extra
style
>
head
>
<
body
>
<
div
class
="header"
>
頭
div>
<
div
class
="main"
>
<
div
class
="main-inner"
>
中
div>
div>
<
div
class
="sub"
>
左
div>
<
div
class
="extra"
>
右
div>
<
div
class
="footer"
>
尾
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...