在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文介绍了css3 column实现卡片瀑布流布局的示例代码,分享给大家,具体如下: 实现效果 今天遇到了需要实现一个卡片的瀑布流布局的问题,卡片高度是不同的。 最后使用css3中的column属性实现了这个布局,而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现的...naive啊) 实现效果大概如下图~ 相关属性
遇到的问题
代码 .videoCards { padding-top: 4rpx; column-count: 2; column-gap: 18rpx; .card { display: inline-block; margin-top: 20rpx; width: 326rpx; background: #FFFFFF; box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.10); border-radius: 14rpx; break-inside: avoid; padding-bottom: 20rpx; overflow: auto; } } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论