zoukankan      html  css  js  c++  java
  • 三栏布局中间流动(固比固)的实现

    1.使用float属性。

    css:

    .left{
       float:left;
       width:200px;
       height:100px;
       background:blue;
    }
    .middle{
      height:100px;
      margin:0 200px;
      background:black;
    }
    .right{
       float:right;
       width:200px;
       height:100px;
       background:green;
    }

      

    html:

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

    注意middl层的标签位置应写在最后面。

    2.使用position属性

    css:

    .left{
         position: absolute;
         top:0;
         left:0;
         width:200px;
         height:100px;
         background:blue;
    }
    .middle{
         height:100px;
         margin:0 200px;
         background:black;
    }
    .right{
         position: absolute;
         top:0;
         right:0;
         width:200px;
         height:100px;
         background:green;
    }

    html:

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

    3.BFC(块级格式化上下文)

    css:

    .left{
         float:left;
         width:200px;
         height:100px;
         background:blue;
    }
    .middle{
         height:100px;
         overflow:hidden;/*触发BFC格式*/
         background:black;
    }
    .right{
         float:right;
         width:200px;
         height:100px;
         background:green;
    }

    html:

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

    注意这里的middl层的标签位置也应写在最后面。

    BFC是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进行定位,以及与其他元素的关系和相互作用。下表就是成为BFC元素后的特性以及如何成为BFC。

    BFC元素最重要的一点就是与外部元素不影响,即碰到浮动元素也不会与其重叠。

  • 相关阅读:
    Linux cron
    web报表工具FineReport常用函数的用法总结(文本函数)
    web报表工具FineReport常用函数的用法总结(文本函数)
    oracle instr函数
    死锁的例子和 synchronized 嵌套使用
    死锁的例子和 synchronized 嵌套使用
    Perl 监控批量错误
    Linux以百万兆字节显示内存大小
    Linux以GB显示内存大小
    Linux以KB显示内存大小
  • 原文地址:https://www.cnblogs.com/luyuefeng/p/8535483.html
Copyright © 2011-2022 走看看