前端应该掌握的CSS实现多列等高布局

我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户体验不是很好!

实际的问题效果如下所示:

需求效果如下:

我们要实现的效果就是不管每个栏目的实际内容多少,都要保证每个栏目是对齐的。

如何解决

HTML代码如下所示:

(1)纯CSS方式解决

CSS代码如下所示:

分析说明:

2.还需要设置父元素overflow:hidden把子元素多出来的色块背景隐藏掉

这样的CSS解决方法没有任何兼容性问题,可以大方放心使用

(2)js方式解决

除了说用CSS解决,我们也需要了解一下JS实现解决问题。

js代码如下所示:

好的,今天就给大家讲这个小技巧,等高布局对于我们前端开发来说,是非常重要的一个布局方法,可以帮助我们提高用户体验。

如果想学习更多前端开发教程,欢迎关注下面的公众号,每天更新更多新内容哦!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180606A0GCOH00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券