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;
    }
  • 相关阅读:
    Java UDP通信简单实现
    为什么要阅读——兼分享《首先,打破一切常规》[中译文]:世界顶级管理者的成功秘诀/(美)马库斯&#183;白金汉,(美)柯特&#183;科夫曼 著
    怎样提高团队管理能力9
    POJ2777 Count Color 线段树区间更新
    Swift和Objective-C混合编程——Swift调用OC
    LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
    ZZUOJ-1195-OS Job Scheduling(郑州大学第七届ACM大学生程序设计竞赛E题)
    CentOS出错You don&#39;t have permission to access on this server
    string 和 vector 初探
    ICMP报文类型
  • 原文地址:https://www.cnblogs.com/Ky-Thompson23/p/11889024.html
Copyright © 2011-2022 走看看