苏慧伦-Lemon Tree（网格布局实例演示）

红影

马黑黑 发表于 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 ...

嗯嗯，现在好了，看起来还是我的电脑问题这样折腾一下也好，和我一样电脑的人看的时候也不会出问题了。

马黑黑

红影 发表于 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
它使得网页布局更容易操控，虽然它的学习成本很高

现在看起来还好啊，不过是网格线的布置。估计还有更难的还没开始讲的吧

马黑黑

红影 发表于 2022-10-16 10:52
现在看起来还好啊，不过是网格线的布置。估计还有更难的还没开始讲的吧

当然，这是一个知识点非常多的领域，我会简化，主要讲常用的、实用的

红影

马黑黑 发表于 2022-10-16 10:56
当然，这是一个知识点非常多的领域，我会简化，主要讲常用的、实用的

我怕回帖影响内容，结果不回帖却想不起来去看了，还好有这个帖子，又跑回去好好学习了一下

马黑黑

红影 发表于 2022-10-16 15:22
我怕回帖影响内容，结果不回帖却想不起来去看了，还好有这个帖子，又跑回去好好学习了一下

这个没有任何影响，设计有目录的，一切从目录那里找到入口。

小辣椒

现在我电脑看见播放器是在下面的

马黑黑

小辣椒 发表于 2022-10-16 16:49
现在我电脑看见播放器是在下面的

代码也做过修正，对核心版本较低的chromium浏览器已经兼容了

小辣椒

马黑黑 发表于 2022-10-16 18:00
代码也做过修正，对核心版本较低的chromium浏览器已经兼容了

好的，就按现在的代码制作了

马黑黑

小辣椒 发表于 2022-10-16 19:32
好的，就按现在的代码制作了

小辣椒

马黑黑 发表于 2022-10-16 19:34

好吧，几天没有玩了，脑子又浆糊的，理一遍先

马黑黑

小辣椒 发表于 2022-10-16 19:37
好吧，几天没有玩了，脑子又浆糊的，理一遍先

慢慢梳理

小辣椒

马黑黑 发表于 2022-10-16 19:39
慢慢梳理

后来还有许多其他事情的，只能兼顾一下了

马黑黑

小辣椒 发表于 2022-10-16 19:42
后来还有许多其他事情的，只能兼顾一下了

还是那句话：不急的