zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    Representation Data in OpenCascade BRep
    Render OpenCascade Geometry Surfaces in OpenSceneGraph
    Render OpenCascade Geometry Curves in OpenSceneGraph
    OpenCascade Shape Representation in OpenSceneGraph
    Geometry Surface of OpenCascade BRep
    Geometry Curve of OpenCascade BRep
    Tyvj2017清北冬令营入学测试
    Spfa算法模板
    洛谷1016 旅行家的预算
    洛谷1290 欧几里得的游戏
  • 原文地址:https://www.cnblogs.com/Ky-Thompson23/p/11889024.html
Copyright © 2011-2022 走看看