雙飛翼布局和聖杯布局的對比

先回顧一下 聖杯布局的實現過程》

在不增加額外標籤的情況下，聖杯布局已經非常完美，聖杯布局使用了相對定位，以後布局是有侷限性的，而且寬度控制要改的地方也多，那麼有沒其他方法更加簡潔方便呢？

在**ued**下，增加多乙個div就可以不用相對布局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼布局。

dom結構：main內層增加了乙個div

<

div 
class
="header"
>header
div>
<
div 
class
="bd"
>
<
div 
class
="main"
>
<
div 
class
="inner"
>
main
div>
div>
<
div 
class
="left"
>left
div>
<
div 
class
="right"
>
right
div>
div>
<
div 
class
="footer"
>footer
div>

<

style
>
body
.header,.footer
.bd.left
.main
.right
.inner
style
>

聖杯布局 雙飛翼布局

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