css每行数量一定,但最后一行数量不定,选中最后一行添加margin-bottom
2023-12-26 17:35:30
为了兼容旧版本60左右的谷歌浏览器,放弃使用flex布局中gap属性
还是使用margin兼容性最好,但需要清除最后一行的margin
转载自 https://www.jianshu.com/p/db65ae0a3c2e
https://www.jianshu.com/p/db65ae0a3c2e
/* 使用选择器重置最后一行的格子下边距为0 */
.item:nth-child(3n+1):nth-last-child(-n+3),
.item:nth-child(3n+1):nth-last-child(-n+3)~.item{
margin-bottom: 0;
}
nth-last-child(-n+3)
选择的是容器中的最后3个元素
nth-child(3n+1)
选择第(3n+1)
个元素,也就是第一列的元素
两者的交集恰好就是最后一行的第一个元素,也就是左下角的这个元素。
最后一行的元素个数并不确定,为了完整的匹配到其后的元素,使用通用兄弟选择器~来选中该目标后面的兄弟元素。
这样两者结合便可以保证总是找全最后一行的元素,而不用管该行是否占满。
文章来源:https://blog.csdn.net/qq_42611074/article/details/135225520
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!