為了實現乙個兩邊寬度固定，中間寬度自適應的三欄布局。
聖杯布局
1、dom解構：
2、css
首先先固定左右兩邊固定的寬度
padding-left：100px；
padding-right：50px；
然後讓三欄的div浮動，設定三欄的寬度，並且清除footer的浮動
.container .floats{
float：float；
#left{
width：100px；
#right{
width：50px；
#center{
width：100%；
#footer{
clean：both；
接著就是把左欄和右欄放在相應留出的位置上使用外負邊距和相對定位。
#left{
margin-left：-100%；
position：relative：
right：100px；
#right{
margin-right：-50px；
#center{
width：100%；
這時候就布局完成了，但是要小心頁面的最小寬度：應該是 100px+50px ++++100px，因為用了position所以center區域還有乙個left！
雙飛翼布局
1、dom解構
2、然後和聖杯布局一樣留出相應的區域
#container{
margin-left：100px；
margin-right：50px；
接著把左右兩欄放到相應的區域
.floats{
float：left；
#footer{
clear：both；
#left{
width：100px；
margin-left：-100%；
#right{
width：50px；
margin-right：-50px；
因為這個布局沒用定位所有最小頁面寬度就是100px+50px。
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 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...