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

2016-03-02    编辑:edit02_lz     点击(
我们经常上网页的时候,如果注意到一些大的网站比如taobao.com等,就会发现他们有三栏布局,中间自动适应,两边固定宽度,同在我们来讲讲实现这种布局的两种方法。

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

方法1:

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

 代码如下 复制代码
<style>
    .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:
    #bbb;text-align: center;} .main{} .content{overflow: hidden;background-color:
    #a4e88c;} .left{width: 100px;background-color: #E79F6D;} .right{width:
    100px;background-color: #7BD;} .left,.right,.content{min-height: 200px;_height:
    200px;} /*伸缩盒布局*/ .flex-container{display: flex;} .content{flex:1;} .left{order:-1;}
</style>
<div class="header">
    页头100px
</div>
<div class="main flex-container">
    <div class="content">
        中间自适应
    </div>
    <div class="left">
        左边宽100px左边宽100px左边宽100px
    </div>
    <div class="right">
        右边宽150px
    </div>
</div>
<div class="footer">
    页脚100px
</div>



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

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

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

 代码如下 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <style type="text/css">
            *{margin: 0;padding: 0;} body{min-width: 450px;} .fl{float: left;}.fr{float:
            right;} .clear{clear: both;} .clearfix{overflow: hidden;_zoom: 1;} .clearfix:after{display:block;content:
            "";width: 0;height: 0;overflow: hidden;clear: both;} .header{height: 100px;background-color:
            #0080FF;} .main{overflow: hidden;_zoom:1;} .left,.right,.cont{min-height:
            300px;padding-bottom: 9999px;margin-bottom: -9999px;_height: 300px;} /*
            三列等高 */ .left{width: 150px;background-color: #f00;} .right{width: 150px;background-color:
            #008080;} .cont{overflow: hidden;background-color: #900;_zoom:1;} .footer{height:
            100px;background-color: #0080FF;}
        </style>
        <div class="header">
            这是头部
        </div>
        <div class="main">
            <div class="left fl">
                left
            </div>
            <div class="right fr">
                right
            </div>
            <div class="cont">
                cont
                <br />
                触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局:不考虑三栏加载顺序,中间栏不用额外加层
                <br />
                防止.cont被隐藏:body{min-width:2x.left+.right}
            </div>
        </div>
        <div class="footer">
            footer内容
        </div>
    </body>

</html>



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

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

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

 代码如下 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <style type="text/css">
            *{margin: 0;padding: 0;} body{min-width: 450px;} .fl{float: left;}.fr{float:
            right;} .clear{clear: both;} .clearfix{overflow: hidden;_zoom: 1;} .clearfix:after{display:block;content:
            "";width: 0;height: 0;overflow: hidden;clear: both;} .header{height: 100px;background-color:
            #0080FF;} .main{overflow: hidden;_zoom:1;} .left,.right,.cont_inner{min-height:
            300px;padding-bottom: 9999px;margin-bottom: -9999px;_height: 300px;}/*
            三列等高 */ .cont{width: 100%;} .cont_inner{margin-left: 150px;margin-right:
            150px;background-color: #900;} .left{width: 150px;background-color: #f00;margin-left:
            -100%;} .right{width: 150px;background-color: #008080;margin-left: -150px;}
            .footer{height: 100px;background-color: #0080FF;}
        </style>
        <div class="header">
            这是头部
        </div>
        <div class="main">
            <div class="cont fl">
                <div class="cont_inner">
                    cont
                </div>
            </div>
            <div class="left fl">
                left
            </div>
            <div class="right fr">
                right
            </div>
        </div>
        <div class="footer">
            footer内容
        </div>
    </body>
</html>



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

从源代码上来看,要不讲究栏目加载顺序,方法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;}

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