如何使用 Float（在打印样式表中）修复此打印布局？

我有一个页面，其中包含网格格式的多个图表，如下所示：

[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]

每个图表都显示在一个包装中float:left图表所在的 div 有overflow: auto。这给出了将图表包裹到屏幕宽度的所需布局。

我遇到的问题是，在打印模式下，这只打印一页并丢失其余部分（第一页也是空白的）。我读了一点并理解大多数情况下的解决方案是转 applyfloat:none这解决了上述问题...但是我丢失了网格格式，并且我想要在打印页面上显示不止一列图表。

我怎样才能解决这个问题？

我正在使用打印样式表，但以下是屏幕样式：

.chartSpace  /* surrounds all charts */
{
    padding-top: 20px;
    width: auto;
    overflow: auto;
}

.chartWrapper /* wrapper for each chart */
{
    float: left;
    padding: 0 20px 0 0;
}

浮动在 print css 中效果不佳，因此请删除浮动或使用 float: none 覆盖它们并使用 inline-block 代替：

.chartWrapper {
    float: none;
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 0;
}