我们在写页面的时候，有的时候会遇到多栏布局，每个栏目里面的内容有的时候可能不一样，这样就会导致每个栏目实际的高度也是不一样的，如果每个栏目有背景颜色的，就会导致每个栏目的底部是对不齐的，用户体验不是很好！
实际的问题效果如下所示：
需求效果如下:
我们要实现的效果就是不管每个栏目的实际内容多少，都要保证每个栏目是对齐的。
如何解决
HTML代码如下所示：
（1）纯CSS方式解决
CSS代码如下所示:
分析说明：
1.元素设置的padding-bottom尽可能大一些，并且需要设置一样大小的margin-bottom负值去抵消padding-bottom撑大的区域，正负一抵消，对于页面布局不会有影响。
2.还需要设置父元素overflow：hidden把子元素多出来的色块背景隐藏掉
这样的CSS解决方法没有任何兼容性问题，可以大方放心使用
（2）js方式解决
除了说用CSS解决，我们也需要了解一下JS实现解决问题。
js代码如下所示:
好的，今天就给大家讲这个小技巧，等高布局对于我们前端开发来说，是非常重要的一个布局方法，可以帮助我们提高用户体验。
如果想学习更多前端开发教程，欢迎关注下面的公众号，每天更新更多新内容哦！
网友评论