我正在格式化网页以显示填字游戏。我希望它的显示格式类似于报纸上的显示格式,以便于打印。类似于以下内容:
这个想法是,我们要处理的是一个线索列表,每一列都溢出到下一个线索中,并且对这些列的高度进行了优化,以便第一个命中在填字游戏的底部(大方框),另外三个命中大约相同的高度。
有没有办法用CSS和HTML做到这一点?我有点怀疑没有。 JavaScript是要走的路吗?谢谢!
编辑添加:
使用-moz-column-width和-moz-column-gap我可以得到这种改进的布局:
关于如何使填字游戏向上移动并产生线索的任何想法?谢谢!
进一步编辑以添加:
我试过 float grid div,它只是将自身置于文本之上,实际上并没有将文本推开。不确定如何更改。看起来是这样的:
我确实尝试过将线索 float 到左侧,然后将这些线索全部排列在页面左侧的一栏中。无论我 float 单个列表项还是整个已排序列表,都发生了这种情况。对我错过的事情有什么想法吗?感谢你的帮助!
最佳答案
参见Newspaper-column in CSS;您可以简单地将填字游戏本身定位为浮点数。