CSS三栏布局

最新推荐文章于 2025-01-20 16:28:30 发布

转载最新推荐文章于 2025-01-20 16:28:30 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lishuxue/p/7274583.html

本文详细介绍了网页布局中的五种常见技术：绝对定位、浮动、圣杯布局、双飞翼布局及Flexbox布局。每种布局技术均附带示例代码，便于理解其原理与应用场景。

一、绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                position: relative;
            }
            .left{
                position: absolute;
                top: 0;
                right: 0;
                width: 100px;
                height: 100px;
                background: blue;
            }
            .right{
                position: absolute;
                top: 0;
                right: 0;
                width: 100px;
                height: 100px;
                background: green; 
            }
            .center{
                margin: 0px 100px;
                height: 100px;
                background: gray;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">rigth</div>
        </div>
    </body>
</html>

二、浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .left{
                float: left;
                width: 100px;
                height: 100px;
                background-color: blue;
            }
            .right{
                float: right;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .center{
                height: 100px;
                margin: 0 100px;
                background-color: green;
            }
        </style>
    </head>

    <body>
        <div>
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="center">center</div>
        </div>
    </body>
</html>

三、圣杯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                height: 100px;
                padding: 0 100px 0 100px;
            }
            .center{
                float: left;
                width: 100%;
                height: 100%;
                background: #808080;
            }
            .left{
                position: relative;
                left: -100px;
                float: left;
                width: 100px;
                height: 100%;
                background: red;
                margin-left: -100%;
            }
            .right{
                position: relative;
                right: -100px;
                float: left;
                width: 100px;
                height: 100%;
                background: green;
                margin-left: -100px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <!-- 中间的 div 必须写在最前面 -->
            <div class="center">center</div>
            <div class="left">left</div>
            <div class="right">rigth</div>
        </div>
    </body>
</html>

　　1.中间盒子的宽度设置为 width: 100%; 独占一行；

　　2.使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
　　　　.left {margin-left:-100%;} 把左边的盒子拉上去
　　　　.right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去

　　3.父盒子设置左右的 padding 来为左右盒子留位置；

　　4.对左右盒子使用相对布局来占据 padding 的空白，避免中间盒子的内容被左右盒子覆盖；

四、双飞翼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                height: 100px;
            }
            .center{
                float: left;
                width: 100%;
                height: 100%;
                background: #808080;
            }
            .center-inner{
                margin: 0 100px;
            }
            .left{
                float: left;
                width: 100px;
                height: 100%;
                background: red;
                margin-left: -100%;
            }
            .right{
                float: left;
                width: 100px;
                height: 100%;
                background: green;
                margin-left: -100px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <!-- 中间的 div 必须写在最前面，并且中间的盒子再套一个div -->
            <div class="center">
                <div class="center-inner">center</div>
            </div>
            <div class="left">left</div>
            <div class="right">rigth</div>
        </div>
    </body>
</html>

　　1.中间盒子的宽度设置为 width: 100%; 独占一行；

　　2.使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；

　　3.在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；

五、圣杯和双飞翼异同

　　圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

　　两种方法基本思路都相同：首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。

　　主要区别在于如何使中间盒子的内容不被左右盒子遮挡：
　　　　圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；
　　　　双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。

　　简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。

六、Flexbox

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                display: flex;
                flex-direction: row;
                height: 100px;
            }
            .left{
                flex-basis: 100px;
                height: 100%;
                background: #0000FF;
            }
            .center{
                flex-grow: 1;
                height: 100%;
                background: gray;
                
            }
            .right{
                flex-basis: 100px;
                height: 100%;
                background: #0000FF;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">rigth</div>
        </div>
    </body>
</html>