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; }

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

Answer 3

过去我遇到了同样的问题。自从我一直关注解决方案。我最喜欢的方法是使用<table>元素。并为打印构建不同的页面。大量的工作，但最终值得。因为我需要它来计费。我的客户真的无法收到丑陋的账单。

示例：

<table style="width: 100%;">
  <tr>
    <td>Alek Rasschaert</td>
    <td style="width: 60%"></td>
    <td>Mobile Express</td>
  </tr>
  <tr>
    <td>Diestsesteenweg 93</td>
    <td style="width: 60%"></td>
    <td>Diestsesteenweg 93</td>
  </tr>
  <tr>
    <td>3010 Kessel-Lo</td>
    <td style="width: 60%"></td>
    <td>3010 Kessel-Lo</td>
  </tr>
</table>

Answer 4

这是我在项目上遇到的一个问题，不幸的是我找不到直截了当的答案。 Jeroens的回答对我不起作用，因为我还在每个图像下显示一些标题文本，因此我需要显示：块行为。我最终采取的方法如下：

首先，我假设用户将以纵向模式在A4纸上打印。我将其包含在页面上的消息框中（“为了获得最佳结果，请以纵向模式打印...等），这在打印时是隐藏的。
其次，您仍然可以浮动图表但是应该在每行之后插入一个清除div。（我知道这会在横向模式下打印时弄乱布局，因此我上面的第一点）。

[] [] [] []
-------清算div [] [] [] []
-------清算div [] [] [] []
等...

我还更进一步，在足够的行填充A4页面后插入了一个分页符div（多少取决于你的图像大小）。

我使用了以下样式：

div.pageBreak {
    page-break-after: always;
    visibility:hidden;
    height:1px !important;
    margin:0;
}

最后，做大量的跨浏览器测试！我发现我必须使图像非常小，因为相同的网格布局适合浏览器的一个页面。这是因为不同浏览器使用的默认页边距不同。

希望这有帮助。

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

4 个答案: