• 使用‘圣杯布局’、‘双飞翼布局’来解释自适应的三栏水平布局


    使用‘圣杯布局’、‘双飞翼布局’来解释自适应的三栏水平布局

    实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。 

    如图,要实现 左右固定 中间宽度自适应

    A:圣杯布局

    ----------------------HTML------------------------

    <div id="header">header</div>
    <div id="content">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</div>
    </div>
    <div id="footer">footer</div>

    ----------------------CSS------------------------

    #header,
    #footer {
    height: 50px;
    line-height: 50px;
    background: #666;
    text-align: center;
    color: #fff;
    font-size: 16px;
    }

    #content {
    /*左右栏通过添加负的margin放到正确的位置了,此段代码是为了摆正中间栏的位置*/
    padding: 0 200px 0 180px;
    height: 100px;
    }

    #middle {
    float: left;
    100%;
    /*左栏上去到第一行*/
    height: 100px;
    background: blue;
    line-height: 100px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    }

    #left {
    float: left;
    180px;
    height: 100px;
    line-height: 100px;
    margin-left: -100%;
    background: #0c9;
    /*中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置*/
    position: relative;
    left: -180px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    }

    #right {
    float: left;
    200px;
    height: 100px;
    line-height: 100px;
    margin-left: -200px;
    background: #0c9;
    /*中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置*/
    position: relative;
    color: #fff;
    font-size: 16px;
    text-align: center;
    right: -200px;
    }

    =======================================================================

    B:双飞翼布局
    ----------------------HTML------------------------

    <div class="container">
    <div class="main">
    <div class="content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    </div>

    ----------------------CSS------------------------

    .left,
    .main,
    .right {
    float: left;
    min-height: 130px;
    text-align: center;
    }

    .left {
    margin-left: -100%;
    background: green;
    200px;
    }

    .right {
    margin-left: -300px;
    background-color: red;
    300px;
    }

    .main {
    background-color: blue;
    100%;
    }

    .content {
    margin: 0 300px 0 200px;
    }

    ========================================================

    C:flex布局

    ----------------------HTML------------------------

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

    ----------------------CSS------------------------

    .container {
    display: flex;
    min-height: 130px;
    }

    .main {
    flex-grow: 1;
    background-color: blue;
    }

    .left {
    order: -1;
    flex-basis: 200px;
    background-color: green;
    }

    .right {
    flex-basis: 300px;
    background-color: red;
    }

    ===========================================

    D:绝对定位布局

    ----------------------HTML------------------------

     <div class="container">

    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
    </div>

    ----------------------CSS------------------------

    .container {
    position: relative;
    }

    .main,
    .right,
    .left {
    top: 0;
    height: 130px;
    }

    .main {
    margin: 0 300px 0 200px;
    background-color: blue;
    }

    .right {
    position: absolute;
    300px;
    right: 0;
    background-color: red;
    }

    .left {
    position: absolute;
    200px;
    background-color: green;
    left: 0;
    }

    ======================================

    demo下载链接地址:https://files.cnblogs.com/files/leshao/%E4%B8%89%E6%A0%8F%E6%B0%B4%E5%B9%B3%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80.rar


    参考网络链接:

    http://static.vgee.cn/static/index.html

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
    https://blog.csdn.net/wangchengiii/article/details/77926868

  • 相关阅读:
    Linux 改变文件的所有者
    Opencv -lippicv
    数据结构--二叉搜索树
    Window下cmd查看目录结构
    windows cmake与nmake
    Ubuntu18.04安装caffe python3.6 opencv3.2 CPU
    apt-get install 下载速度慢问题的解决
    使用pip安装速度慢问题的解决
    神经网络可视化
    【VS】代码行无法折叠及ctrl+鼠标左键无法跳转到定义的问题
  • 原文地址:https://www.cnblogs.com/leshao/p/9646590.html
Copyright © 2020-2023  润新知