三栏宽度自适应布局及等高的思考

一. 实现三栏宽度自适应

第一种方法：

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

实现要点：左栏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  阅读(3981)  评论(4)  编辑  收藏  举报