这是一个棘手的问题，我已经为此苦苦挣扎了很久——是时候问问那些可能比我更了解 CSS 布局的人，以及为什么我的布局是一场噩梦。
考虑这张图片：
蓝线代表视口。应用程序强制布局为水平/横向。用户理解这一点，所以不是问题。
约束... 左侧的列不能占用可用视口空间的 30% 以上。这很容易。右边的井字游戏网格将占据其余部分。在左列和网格之间，大约有 12px 的空间（边距、填充，无论做什么）。在这个例子中，右边的网格有 9 个盒子，但可以少一些，需要相应地流动。网格中列的宽度必须相等。网格中行的高度必须相等。网格中每个框的文本不能强制大小变得不平衡（宽度或高度），意味着溢出：隐藏是可以接受的或截断并添加省略号。
这可以显示在台式电脑、手机、平板电脑等上。布局应该适应，但这不是一个大问题。保持比率/大小是。
所以，就是这样。棘手。我故意没有发布代码，因为我的代码已经变得如此可怕以至于变得毫无用处，并且可能会污染这里开明的人们可能拥有的任何想法。
想法？帮助？非常感谢您！