css每行数量一定,但最后一行数量不定,选中最后一行添加margin-bottom

为了兼容旧版本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)个元素,也就是第一列的元素
两者的交集恰好就是最后一行的第一个元素,也就是左下角的这个元素。
最后一行的元素个数并不确定,为了完整的匹配到其后的元素,使用通用兄弟选择器~来选中该目标后面的兄弟元素。
这样两者结合便可以保证总是找全最后一行的元素,而不用管该行是否占满。

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-27 08:24:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-27 08:24:02       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-27 08:24:02       82 阅读
  4. Python语言-面向对象

    2023-12-27 08:24:02       91 阅读

热门阅读

  1. Mac_通过chmod处理文件权限

    2023-12-27 08:24:02       44 阅读
  2. 处理go中clientv3连接etcd包异常

    2023-12-27 08:24:02       55 阅读
  3. AWS的EC2之间ping不通,服务之间不通,怎么办

    2023-12-27 08:24:02       49 阅读
  4. 2023-全国智能驾驶测试赛-车联网安全专项赛WP (Re)

    2023-12-27 08:24:02       44 阅读
  5. python 读取pdf中的文本

    2023-12-27 08:24:02       48 阅读
  6. gRPC-Go基础(1)protoc的使用

    2023-12-27 08:24:02       53 阅读
  7. TensorFlow是什么

    2023-12-27 08:24:02       59 阅读
  8. LeetCode 26. 删除有序数组中的重复项

    2023-12-27 08:24:02       67 阅读
  9. 初试Kafka

    2023-12-27 08:24:02       58 阅读
  10. python大作业 写作思路

    2023-12-27 08:24:02       47 阅读
  11. gRPC-Go基础(1)基础知识

    2023-12-27 08:24:02       59 阅读
  12. 深入理解 golang 中的反射机制

    2023-12-27 08:24:02       56 阅读