双飞翼布局与圣杯布局

一、圣杯设计思路：

DOM结构：

   

main

   

left

   

right

思路：

1.将div.container通过padding来设置左右的空闲位置来让左右栏占据，所以设置padding-left为左栏宽度，padding-right为右栏宽度。

2.让三个元素统一左浮动，从左到右开始顺序为main,left,right。

3.然后设置div.main的宽度为100%，让它占据container的一行内容。

4.设置左栏的margin-left为-100%，右栏margin-left为其width的负值，这样左栏和右栏就会分别在main的左右两边

5.设置左右栏为相对定位，然后将左右栏定位到左右的空白处

圣杯布局

参考代码：

二、双飞翼布局设计思路：

DOM结构：

   

       

    

   

    

思路：

与圣杯布局相类似，但因为双飞翼布局，采取了div.main中嵌套一个div.content，因此，利用div.content设置margin，来让左右两边腾出位子来让左右栏，就不需要使用相对定位了：

1.设置div.main的宽度为100%，让它占据container的一行内容。

2.让三个元素统一左浮动，从左到右开始顺序为main,left,right。

3.设置左栏的margin-left为-100%，右栏margin-left为其width的负值，这样左栏和右栏就会分别在main的左右两边

4.div.content设置margin，来让左右两边腾出位子来让左右栏占据。

参考代码：