html - 打印(到纸上)用 div 构建的网格 - 错误的换行

Question

我有一个仪表板，我必须在屏幕上显示并打印到纸上。它有日期和一些彩色 block 以形成网格。

在屏幕上，一切看起来都很正常。但是当我尝试打印到纸上时，即使有足够的空间，行也会在错误的地方被打断。我试过缩小网格，但它一直在发生，并且错误地引入了断线。

我只在 Firefox 中遇到这个问题。 Safari 和 Chrome 运行正常。我还没有测试过 IE。

这里有一些显示问题的屏幕截图。

这是它在屏幕上的样子:

这是打印时的样子(纸质/pdf):

在此链接中，您可以看到我编写的 html 和 css:Source code

有什么建议吗？

Answer 1

尝试不对主容器使用以像素为单位的宽度，而是使用 100%