请教一个移动端 css 的样式问题

2020-01-03 16:05:26 +08:00
 zzlit

像这样子 375px 的布局,黑色是菜单 100px,然后天蓝色是两边的等距 20px,剩下中间就是 235px 了,有一些 70px 的分类,一行放三个,中间黑色箭头的距离 25px 该怎么等分呢,一三俩个贴边,二居中?会有动态加载即肯定不止一行的情况,求大佬指点!

4474 次点击
所在节点    JavaScript
45 条回复
darknoll
2020-01-04 00:25:38 +08:00
咋不用 12 栅格布局
Allianzcortex
2020-01-04 10:40:43 +08:00
需求是多行两端对齐尾行左对齐,grid 的 repeat +++1
imdoge
2020-01-04 15:02:14 +08:00
如果不用 flex 的话,传统方法 grid 布局的思想
容器左右两端给一个负的 margin,然后每一个块的宽度是 100%/个数,每一个有一个 padding,左右正好是容器的负 margin,这样就正好左右两个贴边,中间的均匀分布了
MiracleKagari
2020-01-04 22:59:28 +08:00
item inline-block,nth-child( 3n-1),设置每行中间那个 item margin:0 12.5px;即可
akakidz
2020-01-06 14:41:51 +08:00
@justyeh 这篇文章太棒了! css 鬼才

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/634807

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX