三种方法实现CSS三栏布局

栏目: CSS · 发布时间: 5年前

内容简介：作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离

作者：前端林子

本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果

1.方法一：自身浮动的方法

实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现三栏布局1</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .left{
            width:200px;
            height: 300px;
            background-color: #DC698A;

            float:left;

        }
        .middle{
            /*width:100%;*/
            /*中间栏不要设宽度，包括100%*/
            height: 300px;
            background-color: #8CB08B;

            margin:0 200px;
        }
        .right{
            width: 200px;
            height: 300px;
            background-color: #3EACDD;

            float: right;
        }
    </style>
</head>
<body>
    <!-- 左栏左浮右栏右浮，中间不设宽度用左右margin值撑开距离，且布局中中间栏放最后 -->
    <!-- 中间栏实际宽度是当前屏的100% -->
    <div class="left">左栏</div>
    <div class="right">右栏</div>
    <div class="middle">中间栏</div>
</body>
</html>

注意：该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定

实现的效果如下：

三种方法实现CSS三栏布局自身浮动实现三栏布局

2.方法二：margin负值法

实现方法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现三栏布局2</title>
    <style type="text/css">
    body{
        margin:0;
        padding:0;
    }
    .left{
        width:200px;
        height: 300px;
        background-color: #DC698A;

        float:left;
        margin-left:-100%;
    }
    .middle{
        width:100%;
        height: 300px;
        background-color: #8CB08B;

        float:left;
    }
    .right{
        width:200px;
        height: 300px;
        background-color: #3EACDD;

        float: left;
        margin-left: -200px;
    }
    </style>
</head>
<body>
    <!-- 左栏中间栏右栏左浮，左栏margin-left：-100%，中间栏宽100%,，右栏margin-left:-右栏宽度 
    且布局上必须中间栏放第一个-->
    <div class="middle">中间栏</div>
    <div class="left">左栏</div>
    <div class="right">右栏</div>
</body>
</html>

注意：该方法在html布局时，要把中间栏放在第一个

此方法是实现圣杯布局和双飞翼布局的基础。

实现的效果如下：

三种方法实现CSS三栏布局 margin负值法实现三栏布局

3.方法三：绝对定位法

实现方法：左栏、右栏绝对定位，分别固定到页面左右两侧，中间栏不设宽度，用左右margin来撑开距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现三栏布局3</title>
    <style type="text/css">
        body{
            margin:0;
            padding: 0;
        }
        .left{
            width:200px;
            height: 300px;
            background-color: #DC698A;

            position: absolute;
            left:0;
            top:0;
        }
        .middle{
            /*width: 100%;*/
            height: 300px;
            background-color: #8CB08B;
            margin:0 200px;
        }
        .right{
            width:200px;
            height: 300px;
            background-color: #3EACDD;

            position: absolute;
            right:0;
            top:0;
        }
    </style>
</head>
<body>
    <!-- 左右两栏绝对定位，分别固定到页面的左右两侧，中间栏不设宽度，用左右margin撑开距离 -->
    <!-- 中间栏的实际宽度是当前屏的100% -->
    <div class="left">左栏</div>
    <div class="middle">中间栏</div>
    <div class="right">右栏</div>
</body>
</html>

实现的效果如下：

三种方法实现CSS三栏布局

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

众媒时代

腾讯传媒研究 / 中信出版集团股份有限公司 / 2016-3-1 / CNY 52.00

众媒时代，就是一个大众参与的媒体时代。互联网将传统媒体垄断而单一的传播方式彻底颠覆。人人都可以通过互联网成为内容的制造者、传播者。每个人都是媒体，人是种子，媒体变成了土壤。当我们的信息入口被朋友圈霸占，当我们的眼睛只看得到10W+，当我们不可抑制地沉浸在一次次的“技术狂欢”中，当人人都可以举起手机直播突发现场，当未来的头条由机器人说了算……内容正生生不息地以各种可能的形式出现，我们正彻头彻......一起来看看《众媒时代》这本书的介绍吧!

码农工具