css三栏布局

最新推荐文章于 2023-10-01 20:09:08 发布

Dear_pandy

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量187

点赞数

分类专栏：前端面试知识点文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/Dear_pandy/article/details/126253565

版权

前端面试知识点专栏收录该内容

13 篇文章

订阅专栏

1.float实现

给左盒子设置float：left，给右盒子设置float：right，中间盒子设置margin-left和margin-right。需要注意的是，左右盒子要放在中间盒子之前。

<div id="container">
        <div class="left">
            L
        </div>

        <div class="right">
            R
        </div>

        <div class="center">
            C
        </div>
    </div>

 <style>
        html {
            font-size: 33px;
        }

        #container {
            background-color: aquamarine;
            width: 600px;
            height: 400px;
            margin-top: 135px;
            position: relative;
        }

        .left {
            float: left;
            width: 200px;
            background-color: aqua;
        }

        .right {
            float: right;
            width: 300px;
            background-color: rgb(102, 29, 124);
        }

        .center {
            margin-left: 200px;
            margin-right: 300px;
            background-color: bisque;
        }
    </style>

2.absolute实现

给左右盒子设置position：absolute，给左盒子设置left：0；top：0，给右盒子设置right：0；top：0；给中间盒子设置margin-left和margin-right。

.left {
            position: absolute;
            width: 200px;
            background-color: aqua;
            top: 0;
            left: 0;
        }

        .right {
            float: right;
            width: 300px;
            background-color: rgb(102, 29, 124);
            position: absolute;
            top: 0;
            right: 0;
        }

        .center {
            margin-left: 200px;
            margin-right: 300px;
            background-color: bisque;
        }

3.flex实现

给中间设置flex：1

 <style>
        html {
            font-size: 33px;
        }

        #container {
            background-color: aquamarine;
            width: 600px;
            height: 400px;
            margin-top: 135px;
            position: relative;
            display: flex;
        }

        .left {
 
            width: 200px;
            background-color: aqua;
            
        }

        .right {

            width: 300px;
            background-color: rgb(102, 29, 124);

        }

        .center {
            flex: 1;
            background-color: bisque;
        }
    </style>