跨设备的 CSS 布局问题答案

【问题标题】：CSS Layout Issue across devices跨设备的 CSS 布局问题
【发布时间】：2017-05-16 04:51:47
【问题描述】：

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

考虑这张图片：

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

约束... 左边的列不能超过可用视口空间的 30%。这很容易。右边的井字游戏网格将占据其余部分。在左列和网格之间，大约有 12px 的空间（边距、填充，无论做什么）。在这个例子中，右边的网格有 9 个盒子，但可以少一些，需要相应地流动。网格中列的宽度必须相等。网格中行的高度必须相等。网格中每个框的文字不能强制大小变得不平衡（宽度或高度），表示overflow:hidden 可以接受或者截断加省略号。

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

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

想法？帮助？提前非常感谢您！

【问题讨论】：

标签： html css layout responsive box-sizing

【解决方案1】：

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

另外，您可以使用 javascript 来完成，获取包装器的宽度和高度并除以 3，然后将值分配给 tic tac 单元格

如果你已经包含你的代码会很棒

【讨论】：

【解决方案2】：

尝试为此使用 Flexbox。这将帮助您轻松解决问题。

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

1.Link 1

2.Link 2

【讨论】：

原始实现使用了表。那糟透了。我尝试使用 flexbox 的新实现，但效果不佳。我实际上研究了它并使用这些站点来构建它。正如下面的人所说，它可能需要一些 javascript，但希望有一个更清洁的解决方案。