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元素最重要的一点就是与外部元素不影响,即碰到浮动元素也不会与其重叠。

  • 相关阅读:
    Hadoop的运行痕迹
    生活常识
    hadoop集群崩溃恢复记录
    Hadoop_NameNode_代码分析_目录树(2)
    .NET Is 和 As 的区别
    hadoop集群管理之 SecondaryNameNode和NameNode
    sql2005分页存储过程原创
    c#生成json数据 JavaScript对json数据处理
    LVS改变ConnectionHashtable值
    MySQL Cluster集群配置
  • 原文地址:https://www.cnblogs.com/luyuefeng/p/8535483.html
Copyright © 2011-2022 走看看