圣杯布局和双飞翼布局

为了实现一个两边宽度固定，中间宽度自适应的三栏布局。

圣杯布局

1、DOM解构：

<div id=" head "> </div>

<div id="container">

　　<div id="center" class="floats"></div>

　　<div id="left" class="floats"></div>

　　<div id="right" class="floats"></div>

</div>

<div id="footer"></div>

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解构

<div id="header"></div>

<div id="container" class="floats">

　　<div id="center"></div>

</div>

<div id="left"></div>

<div id="right"></div>

<div id="footer"></div>

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。