【实现三栏布局的七种方法】

Crush201

已于 2022-03-13 15:01:37 修改

阅读量136

点赞数 2

分类专栏： html布局方式文章标签： html css css3 前端

于 2022-03-13 14:59:45 首次发布

本文链接：https://blog.csdn.net/qq_55856288/article/details/123459243

版权

html布局方式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了网页布局的六种常见技术：float+margin、float+BFC、flex布局、table布局、position定位以及圣杯和双飞翼布局。通过实例代码详细展示了每种布局的实现原理和应用场景，帮助开发者更好地理解和运用各种布局策略。

摘要由CSDN通过智能技术生成

第一种：float+margin

        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            width: 200px;
            height: 200px;
            float: right;
            background: blue;
        }
        .main{
            height: 200px;
            margin-left: 200px;
            margin-right: 200px;
            background: green;
        }

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>

第二种：float+bfc

        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            float: right;
            background: blue;
            width: 200px;
            height: 200px;
        }.main{
            height: 200px;
            overflow: hidden;
            background: green;
        }

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>

第三种：flex布局

        .container{
            height: 200px;
            display: flex;
            justify-content: space-between;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            width: 200px;
            height: 200px;
            background: blue;
        }
        .main{
            flex: 1;
            background: green;
        }

    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>

第四种：table布局

        .container{
            display: table;
            width: 100%;;
        }
        .left
        {
            height: 200px;
            display:table-cell;
            background: red;
        }
        .main{
            height: 200px;
            display: table-cell;
            background: blue;
        }
        .right{
            height: 200px;
            display: table-cell;
            background: green;
        }

    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>

第五种：position

需要这注意 main 的位置。

.container{
            position: relative;
        }
        .left{
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            background: red;
        }
        .right{
            position: absolute;
            width: 200px;
            height: 200px;
            background: blue;
            /* 必须写这个 和 main书写位置有关系*/
            /* top: 0; */
            right: 0;
        }
        .main{
            height: 200px;
            margin: 0 200px;
            background: green;
        }

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <!-- main写在中间得加top -->
        <div class="main"></div>
    </div>

第六种：圣杯布局

.container{
            margin: 0 200px;
        }
        .main{
            float: left;
            width: 100%;
            height: 200px;
            background: red;
        }
        /* 被注释的地方还可以用相对定位去实现 
            position:relative;
            left:-200px;/right:-200px;
        */
        .left{
            float: left;
            width: 200px;
            height: 200px;
            margin-left: -100%;
            /* transform: translateX(-200px); */
            background: blue;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            /* transform: translateX(200px); */
            margin-left: -200px;
            background:green;
        }

    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

第七种：双飞翼布局

<style>
        .container {
            float: left;
            width: 100%;
            height: 200px;
            background: red;
        }
    
        .main {
            margin: 0 200px;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            margin-left: -100%;
            background: blue;
        }
    
        .right {
            float: left;
            width: 200px;
            height: 200px;
            margin-left: -200px;
            background: green;
        }
    </style>

<body>
    <div class="container">
        <div class="main"></div>
    </div>
        <div class="left"></div>
        <div class="right"></div>
</body>