跨设备的{CSS}布局问题

Question

这是一个棘手的问题，我已经挣扎了很长时间 - 有时候问一些可能比我更了解CSS布局的人以及为什么我的布局真是个噩梦。

考虑这张图片：

蓝线代表视口。应用程序强制布局为水平/横向。用户理解这一点，所以不是问题。

约束...左侧的列可以占用不超过可用视口空间的30％。这很容易。右侧的井字网格将占据剩余部分。在左列和网格之间，有大约12px的空间（边距，填充，无论它完成了什么）。在这个例子中，右侧的网格有9个盒子，但可以少，并且需要相应地流动。网格中列的宽度必须相等。网格中行的高度必须相等。网格中每个框中的文本不能强制大小变得不平衡（宽度或高度），这意味着溢出：隐藏是可接受的或截断并添加省略号。

这可以显示在台式计算机，手机，平板电脑等上。布局应该适应，但这不是一个大问题。保持比率/大小是。

所以，就是这样。棘手。我故意没有发布代码，因为我的代码变得如此怪异，以至于变得无用，并且可能会玷污这里开明的人可能有的任何想法。

思考？救命？非常感谢你！

Answer 1

使用flexbox可以轻松完成。这是一个complete tutorial on flexbox

此外，您可以使用javascript，获取包装器宽度和高度并除以3，并将值分配给tic tac单元格

如果你已经包含了你的代码，那就太好了

Answer 2

尝试使用Flexbox。这将有助于您轻松解决问题。

希望此链接可以帮助您解决问题。

1。Link 1

2。Link 2