三栏网页宽度自适应布局方法

前言：三栏网页宽度自适应布局方法常见的方法有三种：绝对定位法，margin负值法，自身浮动法。详解如下：

 

1、绝对定位法

理解：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离,也就是说主体栏的左margin大于或等于左栏的宽度，主体栏的右margin同样也要大于或等于右栏的宽度。于是实现了三栏自适应布局。

具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>绝对定位法三栏自适应布局</title>
    </head>
    <style>
        html,body{
            margin: 0;
            height: 100%;
        }
        #left{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            background: red;
        }
        #right{
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100%;
            background: blue;
        }
        #main{
            height: 100%;
            margin:0 210px;
            background: yellow;
        }
    </style>
    <body>
        <div id="left"></div>
        <div id="main"></div>
        <div id="right"></div>
    </body>
</html>

效果如下图：

缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

 

2、margin负值法

理解：中间的主体栏要使用双层标签。外层一个div宽度100%显示，并且浮动。并且内层content的div才是真正的主体内容，并给内层div含有左右210px的margin值，那样主体栏左右就空出了210px的宽度。

左栏与右栏都是采用margin负值定位的。左栏左浮动，margin-left为-100%，由于前面主体栏的div宽度为100%，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200px。

具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>margin负值法三栏自适应布局</title>
    </head>
    <style>
        html,body{
            margin: 0;
            height: 100%;
        }
        #main{
            width: 100%;
            height: 100%;
            float: left;
        }
        #main #content{
            height: 100%;
            margin: 0 210px;
            background: yellow;
        }
        #left{
            width: 200px;
            height: 100%;
            float: left;
            margin-left: -100%;
            background: red;
        }
        #right{
            width: 200px;
            height: 100%;
            margin-left: -200px;
            float: left;
            background: blue;
        }
        
    </style>
    <body>
        <div id="main">
            <div id="content"></div>
        </div>
        <div id="left"></div>
        <div id="right"></div>
    </body>
</html>

效果与绝对定位法效果一致。

需要注意的一点是：主体，左右侧栏都用了左浮动，但一定是主体栏部分先浮动，那是一定以及肯定的。至于左右两栏谁先谁后，都无所谓。

 

3、自身浮动法

理解：应用了标签浮动，标签后面的内容会跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>自身浮动法三栏自适应布局</title>
    </head>
    <style>
        html,body{
            margin: 0;
            height: 100%;
        }
        #main{
            height: 100%;
            margin: 0 210px;
            background: yellow;
        }
        #left{
            width: 200px;
            height: 100%;
            float: left;
            background: red;
        }
        #right{
            width: 200px;
            height: 100%;
            float: right;
            background: blue;
        }
        
    </style>
    <body>
        <div id="left"></div>
        <div id="right"></div>
        <div id="main"></div>
    </body>
</html>

效果同第一个相同。

缺点：1）中间主体存在clear:both属性。如果要使用此方法，需避免明显的clear；2）样式在ie6下会有3px的bug，解决方法：使用hack指定main的margin:0 207px;

需要注意：三个div标签的顺序的关键是要把主体栏div放在最后，左右两栏div顺序任意。

 

posted @ 2017-01-19 21:20  caojiayan  阅读(418)  评论(0)    收藏  举报