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。

  • 相关阅读:
    js实现键盘操作对div的移动或改变-------Day43
    深入浅出谈开窗函数(一)
    Android入门第八篇之GridView(九宫图)
    ubuntu sublime安装及配置
    人脸识别算法初次了解
    POJ 1509 Glass Beads
    在Ubuntu上下载、编译和安装Android最新源码
    目标检測的图像特征提取之(一)HOG特征
    WTL介绍
    svn加入新的文件夹
  • 原文地址:https://www.cnblogs.com/foreverZ/p/same-height-with-css.html
Copyright © 2011-2022 走看看