一. 实现三栏宽度自适应

第一种方法:

首先是一种不推荐的做法,用绝对定位实现。

实现要点:左栏left、右栏right设为绝对定位,分别设置width。左栏设置left和top,右栏设置right和top。自适应的中间栏设置为相对定位,设置margin:0 200px。

        #left
        {
            background-color: #E79F6D;
            width: 200px;
            position: absolute;
            left: 5px;
            top: 105px;
        }
        #center
        {
            background-color: #D6D6D6;
            margin: 0 200px;
            top: 0px;
            position: relative;
        }
        #right
        {
            background-color: #77BBDD;
            width: 200px;
            right: 5px;
            top: 105px;
            position: absolute;
        }


这种绝对定位的做法比较死板,牵一发而动全身,而且如果非自适应的栏高度超过自适应的栏高度,并不能撑开底下的footer,谁叫他是绝对定位呢。

 

第二种方法:

用浮动实现。

实现要点:三栏均为float: left。中间栏设width为100%,设margin:0 -200px。margin-left和margin-right为-200px意味着原本应在的位置可以向左和向右再占200px(width仍然占着100%的宽度,只是不用换行去占这么大地了),则此时3栏位于同一行,且左栏与中间栏左侧重叠,右栏与中间栏右侧重叠。只要再将中间栏的数据左右往里各挤200px即可。所以中间栏中再加了个div,设其margin:0 200px即可。

 

        #left
        {            
            width: 200px;
            float: left;
            background-color: #E79F6D;
        }
        #center
        {
            margin: 0 -200px;
            width: 100%;
            float: left;
        }
        #center .inner
        {
            margin: 0 200px;
            background-color: #D6D6D6;            
        }
        #right
        {            
            width: 200px;
            float: left;
            background-color: #77BBDD;
        }

 


   

第三种方法:

  与第二种方法利用中间栏的margin实现不同,这里利用三栏外容器的padding实现。当然他们的中间栏都是100%的。

  你可以去看一种备受推崇的圣杯布局,点击这里查看原文译文。下面代码与原文代码不完全一致,但思想是一致的,另外那篇文章的code有个IE7的BUG,我改了下hack。  

  实现要点:首先设置装着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移动到正确位置。

 

        #container
        {
            padding: 0 150px 0 200px;
        }
        #container .column
        {
            position: relative;
            float: left;
        }
        #center
        {
            width: 100%;
        }
        #left
        {
            width: 200px;
            left: -200px;
            margin-left: -100%;
        }
        #right
        {
            width: 150px;
            margin-left: -150px;
            right: -150px;
        }



 

第四种方法: 

实现要点:这种方法其实和第二种相似,三栏均为float: left。中间栏设width为100%。由于中间栏是第一个DIV,故不需要设置它的margin负值使其位于第一行。此时左栏和右栏将换行显示。通过设置左栏的 margin-left: -100%;和右栏的margin-left: -150px;使三栏处于同一行显示。此时刚好处于合理位置故无需设为相对定位进行偏移,这一点不同于第三种方法。

注意:为了兼容IE6,container的zoom:1不可少,它是为了使元素支持haslayerout,常常IE6出现误差不兼容时,应先试下zoom:1是否可以解决。

        .container
        {
            zoom: 1;
        }
        .column
        {
            float: left;
        }
        .center
        {
            width: 100%;
            background: #D6D6D6;
        }
        .box
        {
            margin: 0 150px 0 200px;
        }
        .left
        {
            margin-left: -100%;
            width: 200px;
            background: #E79F6D;
        }
        .right
        {
            margin-left: -150px;
            width: 150px;
            background: #77BBDD;
        }

 


 

二. 实现等高

  个人觉得,其实很多网页设计是不需要等高的,通常可以用背景色搞定,或者很多背景色本来就是空白的。想想当border为1px的DIV等高了是多么丑吧。当然也有要用到等高的,如果css调不出来可以用上必杀招:JS。这里讲的是用CSS实现等高。通常就是用margin-bottom负值和padding-bottom正值抵消来实现。

  譬如说:上面第三张方法圣杯布局:只要在3栏外面容器加上overflow:hidden,然后分别给三栏加上:margin-bottom:-10000px;padding-bottom:10000px;即可。但是有个BUG:IE7不work,至于为什么我不知道,欢迎各位大大指教。如下:


  对于第四种方法,使用同样的方法:


 

  呃,就说这么多了。 

posted on 2010-07-27 21:06  JayChow  阅读(3973)  评论(4编辑  收藏  举报