zoukankan      html  css  js  c++  java
  • 子级等高布局

    在长期使用 float 这种变态布局的过程中,

    不等高/不方便垂直居中这些问题实在不好意思和人吐槽,

    而如果设成定高那又是另一个坑了,特别是在这个响应式布局的年代。

    记得当年最初遇到这个问题时我还着实动了下脑筋,

    起初是 min-height,或者不允许超出,后来嘛,宝宝心里苦呀...

    无意间发现一个奇葩的办法,甚至我都忘记了这想法是怎么冒出来的。

    .wrap > * {margin-bottom:-1000px;padding-bottom:1000px;}

    后来才知道 display: table-cell 是可以不与 table 一起用的,然后瞬间发现新大陆。

    .wrap > * {display: table-cell;}
    

    非常好,虽然宽度设置用 table 布局向来麻烦,另外你猜他能多行布局吗,呵呵呵呵。

    然而后来接触到响应式,开始喜欢狂拉屏幕边框(改变屏幕宽度),上面两种布局就此沦陷...

    而 With the development of technology,CSS3 中的 box 布局以及 flex 布局相当完美的出来解决这个问题了

    .wrap {display: box;}
    
    .wrap {display: flex;}
    

    这两者分别有 box-align: stretch 和 align-items: stretch 便是让子元素等高的属性,而且默认就是,是不是省了很多事呀。

    (在此强行推荐一波 flex 布局,非常非常非常好用)

    等高布局咱们用的并不算多,但遇到问题总是让人不爽的,作为一个合格的布局师,能 CSS 解决的绝不用 JS。

  • 相关阅读:
    《UNIX环境高级编程》笔记--UNIX标准化及实现
    SPOJ1811最长公共子串问题(后缀自动机)
    一个leetcode解题报告类目,代码很简洁
    字符压缩题目
    求最佳会议地点
    实现树的横向指针
    lower_bound与upper_bound
    求到所有房子距离和最小的新房子
    增加限制条件的矩阵求和
    切分数组来得到一定的和
  • 原文地址:https://www.cnblogs.com/foreverZ/p/same-height-with-css.html
Copyright © 2011-2022 走看看