Javascript 填字游戏的HTML布局

我正在格式化网页以显示纵横字谜。我想让它以一种类似于在报纸上显示的格式显示，以便更容易打印。如下所示：

我们的想法是，我们正在处理一个线索列表，每一列都会溢出到下一列，列的高度会得到优化，以便第一次点击填字游戏底部（大方框）和其他三列的高度大致相同

有没有一种方法可以通过CSS和HTML实现这一点？我有点怀疑没有。JavaScript是一条出路吗？谢谢

---

编辑以添加：

使用-moz列宽和-moz列间距，我能够获得这种改进的布局：

有没有想过如何让纵横字谜向上移动，让线索围绕它流动？谢谢

---

进一步编辑以添加：

我尝试浮动grid div，它只是将自己放在文本的顶部，实际上并没有将文本推开。我不知道该怎么改变。下面是它的外观：

---

我确实试着把线索放在左边，把它们排成一列，放在页面左侧。无论是浮动单个列表项还是浮动整个有序列表，都会发生这种情况。对我错过的东西有什么想法吗？谢谢你的帮助

See；您可以简单地将纵横字谜本身定位为一个浮点数。

使用您所拥有的。将纵横字谜框上的位置设置为相对并向上移动。我显然看不到你的来源，但有一点调整，应该让它做你想要的。您可能还需要将文本浮动到左侧。

我的解决方案是使用一些JavaScript代码填充列，如果不合适，则调整文本大小。虽然不是最优雅的解决方案，但它确实有效。

@Frankenstein专栏在此：Šime，这太棒了！你应该把它做成一个答案，这样我就可以检查它了！嗯，除了让它在填字游戏中流动。。。有什么想法吗？这对我想做的工作来说太多了，但是谢谢你的领导！谢谢你的建议！我能够移动纵横字谜框，但我无法让它将文本推到一边。相反，它只是覆盖和部分模糊了文本。我在问题中添加了一个图像。使框和文本列都向左浮动。遗憾的是，这似乎不适用于CSS多列。我想我将探索使用jQuery动态重新排序列表。如果您发布源代码，我将使用它。