• CSS如何实现三列布局?如果两端固定、中间是自适应又该如何做?(面试必问)


    ①使用浮动布局来实现

    1. 左侧元素与右侧元素优先渲染,分别向左和向右浮动
    2. 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元素并给其设置 margin 左右边距分别为左右两列的宽度,就可以将新元素调整到正确的位置。

    html部分:      

    <div class="container">
        <div class="left">this is left</div>
        <div class="right">this is right</div>
        <div class="center">
            <div class="middle">
                this is center
            </div>
        </div>
    </div>

    css部分:

    .container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .left {
        float: left;
        width: 400px;
        height: 800px;
        background-color: black;
    }
    .center {
        width: 100%;
        height: 1000px;
        background-color: yellow;
    }
    .middle {
        background-color: #fff;
        margin: 0 400px;
        height: 850px;
    }
    .right {
        float: right;
        width: 400px;
        height: 800px;
        background-color: red;
    }

    双飞翼布局

    主要利用了浮动、负边距、相对定位三个布局属性,使三列布局就像小鸟一样,拥有中间的身体和两侧的翅膀。

    html部分:

    <div class="grid">
        <div id="div-middle-02">
            <div id="middle-wrap-02"><span>div-middle</span></div>
        </div>
        <div id="div-left-02"><span>div-left</span></div>
        <div id="div-right-02"><span>div-right</span></div>
    </div>

    css部分:

    #div-middle-02 {
        float: left;
        background-color: #fff9ca;
        width: 100%;
        height: 80px;
    }
    #div-left-02 {
        float: left;
        background-color: red;
        width: 150px;
      /* 重点看这里 */
        margin-left: -100%;
        height: 50px;
    }
     
    #div-right-02 {
        float: left;
        background-color: yellow;
        width: 200px;
      /* 重点看这里 */
        margin-left: -200px;
        height: 50px;
    }
    #middle-wrap-02 {
        margin: 0 200px 0 150px;
        background-color: pink;
    }

    通过左右元素设置定位,中间元素设置 auto; 来实现

     html部分:

    <div class="container">
        <div class="left">this is left</div>
        <div class="center">
            this is center
        </div>
        <div class="right">this is right</div>
    </div>

       css部分:

    .container {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 400px;
        height: 800px;
        background-color: black;
     }
    .center {
        /* 如果没有这一句,那么,center这个div的文字就不会自动换行 */
        width: auto;
        margin: 0 400px;
        height: 1000px;
        background-color: yellow;
    }
    .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 400px;
        height: 900px;
        background-color: red;
    }

    利用 BFC实现

    1.同样的左右两列元素优先渲染,并分别左右浮动。

    2.接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块,不与两侧浮动元素叠加,自然能够插入自己的位置。

    html部分:

    <div class="container">
        <div class="left">this is left</div>
        <div class="right">this is right</div>
        <div class="center">
            this is center
        </div>
    </div>

    css部分:

    .container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .left {
        float: left;
        width: 400px;
        height: 800px;
        background-color: black;
    }
    .center {
        overflow: hidden;
        height: 1000px;
        background-color: yellow;
    }
    .right {
        float: right;
        width: 400px;
        height: 800px;
        background-color: red;
    }
  • 相关阅读:
    async/await 的基础使用及原理简介
    ES6---new Promise()使用方法
    JS中三个点(...)是什么鬼?
    export与export default的区别
    原生页面和H5页面的优劣势分析
    原生页面与H5页面区别
    3月9日学习日志
    3月8日学习日志
    3月5日学习日志
    3月4日学习日志
  • 原文地址:https://www.cnblogs.com/Ky-Thompson23/p/11889024.html
Copyright © 2020-2023  润新知