马黑黑 发表于 2022-10-15 22:01
语句也是好简单的呢，来来去去就是行和列，行开始、列开始，行结束和列结束
认真去看了半天，黑黑讲得很清楚，看懂讲解帖子了，但没看懂这个实例。
红影 发表于 2022-10-15 22:55
认真去看了半天，黑黑讲得很清楚，看懂讲解帖子了，但没看懂这个实例。
你现在再看本帖原帖，应该好了：问题出在定位上，具体是——
由于 lrc 和 mplayer 都需要定位（position: absolute），低版本 chromium 核心的浏览器对 grid 子元素的解读还不完善，就会以帖子父元素为基准定位。高版本的浏览器都不会有问题。
解决方法简单：给帖子子元素加一个相对定位便可：
/* 帖子直系div元素统一样式 */
.mainBox > div {
display: grid; /* 帖子子元素也采用 grid 布局以方便约束它们自己的子元素 */
position: relative;
}
马黑黑 发表于 2022-10-15 23:03
你现在再看本帖原帖，应该好了：问题出在定位上，具体是——
由于 lrc 和 mplayer 都需要定位（positi ...
嗯嗯，现在好了，看起来还是我的电脑问题{:4_173:}这样折腾一下也好，和我一样电脑的人看的时候也不会出问题了。
红影 发表于 2022-10-15 23:06
嗯嗯，现在好了，看起来还是我的电脑问题
也不是。是浏览器版本偏低吧。主要还是对grid的支持度不够（支持但不完全）。理论上，grid的直系子元素无需定位，子元素的子元素不应该因为绝对定位问题二脱离自己的父元素的。但毕竟grid尚未形成主流，浏览器开发者此前还没有完全发力，现在可以了：较新版本的chromium和Firefox都已经完美支持。
那个外加图片里的place-items: start;如果不加也可以的吧，我看讲解帖子里都是自动靠左上的。
红影 发表于 2022-10-15 23:13
那个外加图片里的place-items: start;如果不加也可以的吧，我看讲解帖子里都是自动靠左上的。
最好加，place-items的默认值并不是start，它是依赖环境的，所以加了会更确定。
place-items实际上需要两个值的。举个例子：
place-items: start center; //第一个值是垂直方向，第二个值是水平方向
如果两个值一样，就写一个、写两个都行：
place-items: start;
place-items: start start;
马黑黑 发表于 2022-10-15 23:25
最好加，place-items的默认值并不是start，它是依赖环境的，所以加了会更确定。
place-items实际上需 ...
谢谢黑黑，现在终于弄明白了，一会我做个帖子练习一下。
虽然更喜欢用坐标定位方式，但网格貌似可以批量定义位置呢。
红影 发表于 2022-10-16 08:58
谢谢黑黑，现在终于弄明白了，一会我做个帖子练习一下。
虽然更喜欢用坐标定位方式，但网格貌似可以批量 ...
它使得网页布局更容易操控，虽然它的学习成本很高
马黑黑 发表于 2022-10-16 09:12
它使得网页布局更容易操控，虽然它的学习成本很高
现在看起来还好啊，不过是网格线的布置。估计还有更难的还没开始讲的吧{:4_173:}
红影 发表于 2022-10-16 10:52
现在看起来还好啊，不过是网格线的布置。估计还有更难的还没开始讲的吧
当然，这是一个知识点非常多的领域，我会简化，主要讲常用的、实用的
马黑黑 发表于 2022-10-16 10:56
当然，这是一个知识点非常多的领域，我会简化，主要讲常用的、实用的
我怕回帖影响内容，结果不回帖却想不起来去看了，还好有这个帖子，又跑回去好好学习了一下{:4_173:}
红影 发表于 2022-10-16 15:22
我怕回帖影响内容，结果不回帖却想不起来去看了，还好有这个帖子，又跑回去好好学习了一下
这个没有任何影响，设计有目录的，一切从目录那里找到入口。
现在我电脑看见播放器是在下面的
小辣椒 发表于 2022-10-16 16:49
现在我电脑看见播放器是在下面的
代码也做过修正，对核心版本较低的chromium浏览器已经兼容了
马黑黑 发表于 2022-10-16 18:00
代码也做过修正，对核心版本较低的chromium浏览器已经兼容了
好的，就按现在的代码制作了
小辣椒 发表于 2022-10-16 19:32
好的，就按现在的代码制作了
{:4_181:}
马黑黑 发表于 2022-10-16 19:34
好吧，几天没有玩了，脑子又浆糊的，理一遍先{:4_170:}
小辣椒 发表于 2022-10-16 19:37
好吧，几天没有玩了，脑子又浆糊的，理一遍先
慢慢梳理
马黑黑 发表于 2022-10-16 19:39
慢慢梳理
后来还有许多其他事情的，只能兼顾一下了
小辣椒 发表于 2022-10-16 19:42
后来还有许多其他事情的，只能兼顾一下了
还是那句话：不急的