开发者社区> 问答> 正文

问个踩格子游戏的棋盘布局问题

screenshot
主要两个问题:
1 格子布局(每行四个,单双数行拐角位置不同 有个非常重要的前提条件是格子数量不固定。有可能是15个也有可能是18个之类的——这会导致最后一行格子的方向不同)
2 格子的数字顺序要和图片相同

我现在的实现思路:

1.格子布局
除最后一行外全部采用inline-block,主要方便布局且不会有对齐问题。最后一行利用float:right.不过很明显最后一行的格子和上一行并不能对齐
2.格子数字
利用js改变对应位置的格子内的数字(5+8N到8n+8之间的格子数字倒过来赋值),然后由于前面将最后一行格子float:right,所以对最后一行格子做判断,是的话不改变赋值。

我感觉应该还有另一种思路,即单数行格子全部float:left,双数行格子float:right,但是这种情况下对齐有问题,一直没解决掉。不知道各位对这种思路的话,有什么想法没?

展开
收起
杨冬芳 2016-06-01 16:39:40 2647 0
1 条回答
写回答
取消 提交回答
  • IT从业

    其实我不明白的是,既然已经知道5+8n之类的,又不考虑兼容性的,为什么不直接用:nth-child选择符方式来处理呢

    2019-07-17 19:23:30
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
数据如何让运动更好玩 立即下载
数据如何让运动更好玩有趣 立即下载
低代码开发师(初级)实战教程 立即下载