当我们为活动触发 livestream 聊天时,div.container.post::before 中会出现这个很大的空白。在用标签触发转换之前,间距都是正常的。
我尝试调整 CSS 来修改这个元素,但没能弄明白。如果我隐藏 ::before,则会出现 ::after。当我隐藏两者时,间距仍然存在。
官方截图没有出现这个间距,所以我不太清楚是怎么回事:
当我们为活动触发 livestream 聊天时,div.container.post::before 中会出现这个很大的空白。在用标签触发转换之前,间距都是正常的。
我尝试调整 CSS 来修改这个元素,但没能弄明白。如果我隐藏 ::before,则会出现 ::after。当我隐藏两者时,间距仍然存在。
官方截图没有出现这个间距,所以我不太清楚是怎么回事:
The spacing should be for the topic timeline (image above for reference), which is why without the clearfixes the space is still present. There is still space for the timeline, even if there is only one post and even if you are not admin, where the timeline would appear empty and appears as empty space.
It may be inconsistent or jarring if this space filled when a new post is added and the topic timeline appears, but if you want it to take up the full space when it is only one post (no timeline), you could do this:
@media screen and (min-width: 925px) {
.container.posts:not(:has(.timeline-scrollarea-wrapper)) {
grid-template-columns: 100%;
}
}
Note: The .timeline-scrollarea-wrapper only appears if there is enough posts for the timeline to appear, which is why this works.
For Admins (see the floating button):
For Non-Admins:
If you want a little space for the settings button, you can adjust or tweak this part:
grid-template-columns: 90% 10%;
grid-template-columns: calc(100% - 80px) 80px;
Does this help understand what is going on with the layout or assist fully? We see that the clearfix in your screenshot takes up a slightly different spacing than we were able to replicate, so we aren’t 100% certain if this addresses the issue.
I would personally leave it as-is for consistency with the timeline being available or not available, but if you want to make changes to it, the css above should be sufficient for taking up the full width when the topic timeline is empty. Let us know if you have any issues with this or need help with implementation! Thanks.
间距应该是用于主题时间线(参考上面的图片),这就是为什么没有清除浮动(clearfixes)时,间距仍然存在。即使只有一个帖子,即使您不是管理员,时间线也会出现空白,并显示为空白。
当添加新帖子并出现主题时间线时,如果此空间被填充,可能会不一致或显得突兀,但如果您希望它在只有一个帖子(没有时间线)时占据全部空间,可以这样做:
@media screen and (min-width: 925px) {
.container.posts:not(:has(.timeline-scrollarea-wrapper)) {
grid-template-columns: 100%;
}
}
注意:.timeline-scrollarea-wrapper 仅在有足够帖子出现时间线时出现,这就是为什么这个方法有效。
对于管理员(请参阅浮动按钮):
对于非管理员:
如果您想为设置按钮留出一些空间,可以调整或修改这部分:
grid-template-columns: 90% 10%;
grid-template-columns: calc(100% - 80px) 80px;
这有助于理解布局问题或完全解决问题吗?我们看到您截图中的清除浮动(clearfix)占用的间距与我们能够复制的略有不同,因此我们不能完全确定这是否解决了问题。
我个人会保持原样,以保持时间线可用或不可用的一致性,但如果您想对其进行更改,上面的 CSS 应该足以在主题时间线为空时占据全部宽度。如果您在此过程中遇到任何问题或需要实施方面的帮助,请告知我们!谢谢。