低版本的安卓机上是不生效的
- 代码
.grid_4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
text-align: center;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
- 正常的效果
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 5 | 6 | 7 | 8 |
- 低版本安卓机上的效果
| 1 |
|---|
| 2 |
| …… |
-
解决方法：使用flex布局模拟出grid的效果
- 代码
.grid_4 { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .grid_4 .manager_item { width: calc(calc(100% / 4) - 15px); margin: 0 15px 15px 0; text-align: center; } <!--这个是为了删除是4的倍数的右magin--> .grid_4 .manager_item:nth-of-type(4n){ margin-right: 0; }
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/158659.html
