zoukankan      html  css  js  c++  java
  • 三栏式布局(下)

     以下两种方式分别用float和position:absolute 实现,中间的自适应宽度都是用margin实现的,事实证明margin真的很方便!

     方法1(position):

    .container{
        background-color: #eee;
        position:relative;
        overflow: auto;
    }
    .left,.right{
        position: absolute;
        top:20px;
    }
    .left{
        width:200px;
        left:20px;
    }
    .content{
       margin:0px 160px 0px 240px;
    }
    .right{
       right:20px;
       width:120px;
    }

    //这种方式存在的一个问题:container的高度是由content决定的,如果溢出,会出现滚动条。
    这是因为最高的元素right设置了absolute定位。

    方法二(float):

    .container{
        background-color: #eee;
        position:relative;
        overflow: auto;
    }
    .left,.right{
        position: absolute;
        top:20px;
    }
    .left{
        width:200px;
        left:20px;
    }
    .content{
       margin:0px 160px 0px 240px;
    }
    .right{
       right:20px;
       width:120px;
    }


    //这种方式完全符合要求。但是有一点需要注意,html文件中right标签要写在content标签前面。如下:
     <body>
       <div class="container">
        <div class="left">
          <img src="images/eg_venus.gif" />
           <span>coding </span>
          </div>
          <div class="right">
           <img src="images/eg_merglobe.gif" />
           <img src="images/eg_planets.jpg" />
           <img src="images/eg_sun.gif" />
           <img src="images/eg_merglobe.gif" />
           <img src="images/yujinxiang.jpg" />
          </div>
           <div class="content">
           <p>我的团队</p>
           <p>我申请了好几个团队,目前还没有审核</p>
           <p>我申请了好几个团队,目前还没有审核</p>
           <p>我申请了好几个团队,目前还没有审核</p>
           <p>我申请了好几个团队,目前还没有审核</p>
           <p>我申请了好几个团队,目前还没有审核</p>
          </div>
        </div>
      </body>

     完整代码地址:https://github.com/summer323/my-way-to-Front-end/tree/ife

    最后:网上还有流传的负margin实现方法,个人感觉不利于维护。感兴趣的可以查一下。

  • 相关阅读:
    一个数组找出第k大的数(待补)
    变动二叉树
    判断一个二叉树
    Redis的过期策略和内存淘汰机制
    sql连接详解
    http 请求和格式
    java基础知识
    分页信息
    持续集成之Jenkins自动部署war包到远程服务器
    no-sql数据库之redis
  • 原文地址:https://www.cnblogs.com/summer323/p/5307548.html
Copyright © 2011-2022 走看看