一聚教程网:一个值得你收藏的教程网站

最新下载

css+div三栏布局 左右固定宽 中间自适应

时间:2015-01-28 00:00:00 编辑:简简单单 来源:转载

三栏布局,这是一种相对比较常见的页面布局,这里提供2种实现方法:

方法1:

使用最新的css3伸缩盒布局属性,可轻松实现(三栏等高,默认就是三栏等高哟!)

 代码如下


    页头100px


   
        中间自适应
   
   
        左边宽100px左边宽100px左边宽100px
   
   
        右边宽150px
   


    页脚100px



提示:你可以先修改部分代码再运行。

方法2:(不考虑三栏加载顺序,中间栏不用额外加层)

主要运用的是触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局的,源码如下:

 代码如下


   
   
   
       
       
            这是头部
       
       
           
                left
           
           
                right
           
           
                cont
               

                触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局:不考虑三栏加载顺序,中间栏不用额外加层
               

                防止.cont被隐藏:body{min-width:2x.left+.right}
           
       
       
            footer内容
       
   



提示:你可以先修改部分代码再运行。

方法3:(传说中的圣杯/双飞翼布局,中间自适应栏可优先加载)

主要运用的是浮动float 和margin的结合使用,源码如下:

 代码如下


   
   
   
       
       
            这是头部
       
       
           
               
                    cont
               
           
           
                left
           
           
                right
           
       
       
            footer内容
       
   



提示:你可以先修改部分代码再运行。

从源代码上来看,要不讲究栏目加载顺序,方法1是比较简洁的;但要求自适应栏目优先加载,圣杯布局无疑是首选方案!

另外补充下,圣杯布局是比较灵活的一种布局方式:表现为不改动html结构,只调整css样式,即可实现各种布局,如用下面的任一代码替换上面方法2的对应部分即可实现不同布局:

.cont_inner{margin-right: 300px;background-color: #900;}
    .left{width: 150px;background-color: #f00;margin-left: -300px;}
    .right{width: 150px;float: left;background-color: #008080;margin-left:-150px;}



.cont_inner{margin-left: 300px;background-color: #900;}
    .left{width: 150px;background-color: #f00;margin-left: -100%;}
    .right{width: 150px;float: left;background-color: #008080;margin-left:-100%;position: relative;left: 150px;}

其它布局,请自行折腾组合 ^_^

文章评论

热门栏目