如何使用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屋!