子级等高布局

在长期使用 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。

转载于:https://www.cnblogs.com/foreverZ/p/same-height-with-css.html