9

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

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

每个图表都显示在一个包装器中，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;
}
4

4 回答 4

9

浮点数在打印 css 中效果不佳，因此删除浮点数或使用 float: none 覆盖它们并改用 inline-block：

.chartWrapper {
    float: none;
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 0;
}
于 2014-09-25T09:00:19.187 回答
2

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

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

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

于 2009-01-29T00:43:10.873 回答
1

过去我有同样的问题。自从我一直在寻找解决方案。我最喜欢的方法是使用<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>
于 2016-04-11T14:50:24.193 回答
0

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

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

[][][][]
------- 清除 div
[][][][]
------- 清除 div
[][][][]
等...

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

为此，我使用了以下样式：

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

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

希望这可以帮助。

于 2010-10-20T08:25:38.437 回答