search

TureeZhang / CSL-CN

CSL-CN
http://www.cities-skylines.cn
Other
39 stars 5 forks source link

主页页面自适应布局中的文字重叠及其他页面布局问题 #49

Closed C6H11OH closed 4 years ago

C6H11OH commented 4 years ago
问题描述 目前在主页发现以下几种布局 总页面宽度 布局 导航栏默认状态
1600px以上 中间栏较宽的三栏布局 显示
1200px-1599px 中间栏较窄的三栏布局 显示
992px-1199px 两栏布局 显示
768px-991px 两栏布局 不显示
768px以下 一栏布局 不显示

导航栏保持默认状态时会发生文字重叠的页面宽度区间如下

因为现在一般没有宽度低于310px的浏览器所以对此不做讨论

各模块的最小宽度 模块标题 元素不会溢出的最小宽度(约)
天际线图片及百科标语 1104px
GitHub及编辑者入口顶栏 430px
天际线图片 370px
百科全书 310px
经营 292px
元数据 232px

其中百科标语在总页面宽度1200px以上时才会显示，但导航栏会占据约200的页面宽度，所以显示导航栏时为了显示完整的百科标语需要约1304px的总页面宽度

图 百科全书模块中的mod推荐已经溢出到了下一行并且被经营模块的标题遮挡了一部分 image

原因分析

  1. 页面内容是按行固定的，每一行的内容超出模块长度时会溢出至下一行，但下一行不会向下浮动于是上一行的溢出部分就会被下一行遮挡

可能的解决方案

  1. 浮动所有元素，让浏览器自行决定换行，同时增加可变的模块(盒子)高度的适配
  2. 限制模块的最小宽度，并更改布局变更的宽度节点
C6H11OH commented 4 years ago

补充 这应该是一个页面错误(bug)

TureeZhang commented 4 years ago

非常感谢！宁可是真的太专业了，抓到的几个数据都是对的。

前端框架排版采用的阿里 Ng_Zorro 框架，主页的排布使用的是 Zorro 的 GRID 栅格：Grid栅格 - NG - ZORRO。如果方便，可以移步稍作阅读。

这样的不当做法可能就导致了元素堆叠的问题。应当来说，GRID 布局就不应该限制最小宽度，但我这么做了哈哈。主要考虑是希望你能保留维基文章目录的这个排版，因为实在觉得漂亮，但又不擅长前端，所以只能暂时这样狗住，哈哈。

非常感谢反馈，我后续应该会让他们一个个向下堆叠，牺牲目前“有意的非整齐排版”的美观性，变为每列由宽度决定是否换行。

再次感谢！可见宁的专业素养和反馈问题的严谨细致，非常感谢！

TureeZhang commented 4 years ago

标记为新功能需求： 因为可能需要支持动态文档目录的自动排布了，目前是写死的排版。

C6H11OH commented 4 years ago

最近不确定之后的安排，之后时间确定以后我看看能不能帮忙改进或者重写一个框架。我是cs专业的，不过上过一些前端的选修，希望能帮上点忙。(饼先画上...)

TureeZhang commented 4 years ago

问题已解决，关闭此 issue 。