聖杯布局和雙飛翼布局

布局要求：

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...