如何使用Float（在打印样式表中）修复此打印布局？ [英] How can I fix this print layout with Float (in print stylesheet)?

问题描述

我有一个网格格式的多个图表的页面，如下：

I have a page with multiple charts in a grid-like format as follows:

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

每个图表都显示在包含 float：left 和图表中的div有 overflow：auto 。

Each chart is displayed in a wrapper with float:left and the div the charts are in has overflow: auto. This gives the desired layout wrapping the charts to screen width.

我遇到的问题是，在打印模式下，这只打印一个页面并丢失其余页面（也是第一页是空白）。我已经读了一点，并理解解决方案在大多数情况下是应用 float：none ，它解决了上述问题...但我失去了网格格式，我想打印页上有多列图表。

The problem I have is that in print mode this only prints one page and loses the rest (also first page is blank). I have read a little bit and understand the solution in most cases is to turn apply float:none which solves the above problems... But I lose the grid format and I want more than one column of charts on the printed page.

如何解决这个问题？

我使用的是打印样式表，

I am using a print style sheet but here are the screen styles:

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

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

推荐答案

Float print css，so remove the float or override override with float：none and use inline-block instead：

Float does not work well in print css, so remove the floats or override them with float: none and use inline-block instead:

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

这篇关于如何使用Float（在打印样式表中）修复此打印布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！