zoukankan      html  css  js  c++  java
  • [css]等高列的简单实现

    又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧。

    1.负边距控制法。

    <div id="content">
        <div class="left">左边,无高度属性,自适应于最高一栏的高度</div>
        <div class="right">右边,无高度属性,自适应于最高一栏的高度</div>
        <div class="center">中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应中间,宽度自适应</div>
    </div>
    

    把容器的overflow设为hidden,给每列都设置大的底部内边距,再用数值相似的负外边距消除这个高度。

    #content{
      overflow:hidden;
    }
    .left,.right,.center{
      padding-bottom:9999px;
      margin-bottom:-9989px;
      padding-top:10px;
      padding-left:10px;
      padding-right:10px;
    }
    .left{
      float:left;
      200px;
      background-color:#eee;
    }
    .right{
      float:right;
      300px;
      background-color:#ddd;
    
    }
    .center{
      margin-left:230px;
      margin-right:330px;
      background-color:#999;
    }
    

    2.flex布局

    同样的html结构。如果是三等分的话,用flex非常简单,align-items的属性默认值是stretch,所以就是等高的,上css代码:

    #content {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      overflow: hidden;
    }
    .left,.right,.center {
      flex: 1;
    }
    .left {
      order: 0;
      background-color: #eee;
    }
    .center {
      order: 1;
       margin: 0 10px;
      background-color: #999;
    }
    .right {
      order: 2;
     
      background-color: #ddd;
    }
    

    3.参考资料

  • 相关阅读:
    MySQL存储过程参数【4】
    MySQL存储过程的变量【3】
    MySQL存储过程入门【2】
    MySQL存储过程简介【1】
    MySQL删除重复行的方式
    在MySQL单个表中找到重复的值
    MySQL比较两个表不同的数据
    【思维】P5743 【深基7.习8】猴子吃桃——有趣的解法,归纳推导
    对判断质数的算法的优化
    【思维】P1321 单词覆盖还原
  • 原文地址:https://www.cnblogs.com/lijie33402/p/4778417.html
Copyright © 2011-2022 走看看