CSS布局：三栏.docx

3栏布局
左右栏固定宽度,中间栏自适应其余宽度。 
 
文档顺序:左,中,右
1、一种不推荐的做法,用绝对定位实现。
   实现要点:左栏left、右栏right设为绝对定位,分别设置width。左栏设置left和top,
   右栏设置right和top。自适应的中间栏设置为相对定位,设置margin:0 200px(不用相对定位也可可以了)。
   ************
   问题:如果非自适应的栏高度超过自适应的栏高度,并不能撑开底下的footer。
  
2、用浮动实现。
    实现要点:三栏均为float: left。
    中间栏设width为100%,设margin:0 -200px。margin-left和margin-right为-200px意味着原本应在的位置
    可以向左和向右再占200px(width仍然占着 100%的宽度,只是不用换行去占这么大地了),
    则此时3栏位于同一行,且左栏与中间栏左侧重叠,右栏与中间栏右侧重叠。只要再将中间栏的数据左右往
    里各挤200px即可。所以中间栏中再加了个div,设其margin:0 200px即可。(左右栏宽度都设置为200px;)
文档顺序:中,左,右
1、再用一个包裹着(中,左),于是变成(左,中),(右)两栏布局。
2、三栏均为float: left。中间栏设width为100%。一行。此时左栏和右栏将换行显示。
   通过设置左栏的 margin-left: -100%;和右栏的margin-left: -200px;使三栏处于同一行显示。
   此时刚好处于合理位置故无需设为相对定位进行偏移。
   此时3栏位于同一行,且左栏与中间栏左侧重叠,右栏与中间栏右侧重叠。只要再将中间栏的数据左右往
   里各挤左右栏的宽度即可。所以中间栏中再加了个div,设其margin:0 200px即可。
   注意:为了兼容IE6,container的zoom:1不可少,它是为了使元素支持haslayerout,常常IE6出现误
   差不兼容时,应先试下zoom:1是否可以解决。
  
  
 3、圣杯布局:
   实现要点:首先设置装着3栏的容器container的padding:0 150px 0 200px
   (ps:左栏width是200px,右栏width是150px)。由于中间栏是第一个DIV,且设了中间DIV的width:100%。
   则下面要做的就是:1. 把左栏DIV放到container的padding-left的空白处:设margin-left: -100%
   (这个100%是container的width的100%,当然不包含padding), 则往左移动了100%的距离,
   但仍然在 padding-left空白处的右侧,所以再利用相对定位,使左移200px,即left:-200px,或者 right:200px。
    2. 把右栏DIV放到container的padding-right的空白处:同上,先使同行显示则设margin-left: -150px,
    再设right:-150px移动到正确位置。
   
    但IE7解