如何使用Float(在打印样式表中)修复此打印版面？

Question

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

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

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

我遇到的问题是,在打印模式下,这只打印一页并丢失其余页面(第一页也是空白).我已经阅读了一点,并了解解决方案在大多数情况下是转为应用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:none覆盖它们并使用inline-block代替:

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

Answer 2

我不知道你是否真的需要float: left其他东西，但你可以尝试：

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

这也将使divs 彼此相邻，并且不会对文档的流程产生奇怪的影响。