css - 如何使用 Float(在打印样式表中)修复此打印布局？

Question

我有一个包含多个图表的页面，格式如下:

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

每个图表都显示在带有 float:left 的包装器中，图表所在的 div 具有 overflow:auto。这提供了所需的布局，将图表包裹到屏幕宽度。

我遇到的问题是，在打印模式下，这只会打印一页并丢失其余页面(第一页也是空白的)。我读了一点，明白在大多数情况下解决方案是转 apply float:none 解决上述问题......但我失去了网格格式，我想要不止一列图表在打印页面上。

我该如何解决这个问题？

我正在使用打印样式表，但这里是屏幕样式:

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

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

Answer 1

Float 在 print css 中效果不佳，因此移除 float 或使用 float: none 覆盖它们并改用 inline-block:

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