填字游戏的HTML布局

Question

我正在格式化网页以显示填字游戏。我希望它的显示格式类似于它在报纸上的显示方式，以便于打印。如下所示：

这个想法是我们正在使用一个线索列表，每个列溢出到下一个列，并且列的高度被优化，以便第一个点击填字游戏的底部（大框）和其他三个高度大致相同。

有没有办法用CSS和HTML做到这一点？我有点怀疑没有。 JavaScript是否可行？谢谢！

---

编辑添加：

使用-moz-column-width和-moz-column-gap我可以获得这种改进的布局：

有关如何让填字游戏向上移动并且有线索流动的任何想法？谢谢！

---

进一步编辑添加：

我尝试浮动网格div，它只是放在文本的顶部，它实际上并没有将文本推出。不知道如何改变它。这是它的样子：

我确实尝试将线索浮动到左侧，这些线索在页面左侧的一列中排列。无论我是浮动单个列表项还是整个有序列表，都会发生这种情况。对我错过的东西的任何想法？谢谢你的帮助！

Answer 1

见Newspaper-column in CSS;你可以简单地将填字游戏本身定位为浮动。

Answer 2

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

Answer 3

使用你拥有的东西。将填字游戏框上的位置设置为相对位置并将其向上移动。我显然无法看到你的来源，但有一点调整，应该让它做你想要的。您可能还需要将文本浮动到左侧。