css实现三栏布局

最新推荐文章于 2023-06-23 19:33:50 发布

@119

最新推荐文章于 2023-06-23 19:33:50 发布

阅读量612

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ty987654/article/details/81672781

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近面试，前端经常会被问到css实现三栏布局的问题。即实现左右两栏宽度固定，中间栏宽度自适应。

第一种：float+margin

    <style>
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .left, .right {
            width:400px;
            background: #f00;
        }
        .middle {
            margin: 0 400px 0 400px;
            background: #ff0;
        }
    </style>

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

注：1. 左栏与右栏分别进行左浮动与右浮动，左栏与右栏的宽度可以不相等。

2. 中间栏的margin-left值与margin-right值分别是左栏的宽度与右栏的宽度。若不设置这两个参数，中间栏的长度将和父容器相同，无法实现三栏并列的效果。

3. 为了使父容器自适应最长的子元素，需要将父容器的overflow属性设置为hidden。

4. 注意html代码中三个div的布局，中间栏位于最后。

第二种：position+margin

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            position: relative;
        }
        .left, .right {
            position: absolute;
            top: 0;
            background-color: #f00;
        }
        .left {
            left: 0;
            width: 200px;
        }
        .right {
            right: 0;
            width: 400px;
        }
        .middle {
            margin: 0 400px 0 200px;
            background-color: #ff0;
        }
    </style>

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

注：1. 将父容器的position设为relative，左栏与右栏的position设为absolute。

2. 左栏与右栏的宽度可以不相等。

2. 中间栏的margin-left值与margin-right值分别是左栏的宽度与右栏的宽度。

第三种：flex弹性布局

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
        }
        .left {
            width: 200px;
            height: 300px;
            background-color: #f00;
        }
        .middle {
            flex: 1;
            background-color: #ff0;
        }
        .right {
            width: 300px;
            height: 400px;
            background-color: #f0f;
        }
    </style>

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

注：1. 为父元素设置display: flex属性。

2. 左栏与右栏分别设置相应的宽和高。左栏与右栏的宽高可以不相等。

3. 中间栏设置flex:1属性，代表中间栏将占据剩余的所有空间，如果不设置flex等于1，那么中间栏的宽度将由内部元素撑起。