如何使用Float（打印样式表）修复此打印布局？

我有多个图表中的页面栅格状格式如下：如何使用Float（打印样式表）修复此打印布局？

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

每个图表被显示在一个包装与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; 
}

来源

2009-01-23 KWorrall

你为什么要使用溢出：汽车;？溢出：隐藏;将导致div包含浮动的子元素。也许这是值得的 – roborourke 2009-01-23 11:59:08

听起来像一个浏览器错误 - 这是什么浏览器呢？ – bobince 2009-01-23 11:59:45

感谢提示桑丘，我会记住它。不幸的是，它仍然在做同样的事情。浏览器是IE 7.有趣的是，在Mozilla中它看起来是一样的。 – KWorrall 2009-01-23 14:25:05

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

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

这也会将div放在彼此相邻的位置，它对文档的流程不会造成奇怪的影响。

来源

2009-01-29 00:43:10 jeroen

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

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

[] [] [] []
-------结算DIV
[] [] [] []
-------清除DIV
[] [] [] []
等等

我也进了一步，并插入足够的行后，页面破div来一张A4纸（多少取决于图像大小）。

我用这个以下样式：

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

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

希望这会有所帮助。

来源

2010-10-20 08:25:38 benb

浮动不打印的CSS很好地工作，所以去掉浮体或浮动重写他们：none和使用inline-block的替代：

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

来源

2014-09-25 09:00:19

在过去我有同样的问题。自从我对解决方案持开放态度以来。我最喜欢的方法是使用<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-11 14:50:24 user3806549

如何使用Float（打印样式表）修复此打印布局？

回答

相关问题