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。

  • 相关阅读:
    自定义ckeditor5
    ckEditor5 图片上传到七牛云
    Vue2.0原理-指令
    小程序体积优化(1)--优化大文本
    win10系统安装docker注意事项
    Vue2.0原理-模板解析
    使用nginx部署静态网站
    react-native初体验(2) — 认识路由
    react-native初体验(1) — hello world
    领骑衫总结
  • 原文地址:https://www.cnblogs.com/foreverZ/p/same-height-with-css.html
Copyright © 2011-2022 走看看