我怎样才能用Float(在打印样式表中)修复这种打印布局?[英] How can I fix this print layout with Float (in print stylesheet)?

本文是小编为大家收集整理的关于我怎样才能用Float(在打印样式表中)修复这种打印布局?的处理方法,想解了我怎样才能用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;
}

推荐答案

浮点在打印CSS中无法正常工作,因此请卸下浮子或用float覆盖它们:无并使用内联块:

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

其他推荐答案

我不知道您是否真的需要float: left其他事情,但是您可以尝试:

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

也可以将div s彼此放置,并且对文档的流程没有奇怪的事情.

其他推荐答案

过去我遇到了同样的问题.自从我对解决方案的关注.我最喜欢的方法是使用<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>

本文地址:https://www.itbaoku.cn/post/571085.html