css – 如何使用Float(在打印样式表中)修复此打印版面？

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

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

每个图表都显示在一个包含float：left的包装中,而图表所在的div则显示为overflow：auto.这给出了将图表包装到屏幕宽度所需的布局.

我遇到的问题是,在打印模式下,这只会打印一页并丢失其余部分(第一页也是空白).我已经阅读了一点,并了解解决方案在大多数情况下是转动应用浮点数：无解决上述问题…但我丢失了网格格式,我想在打印页面上有多列图表.

我怎样才能解决这个问题？

我正在使用打印样式表,但这里是屏幕样式：

.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中不能很好地工作,所以删除浮点数或用float：none覆盖它们并使用inline-block代替：

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

原文地址：https://www.jb51.cc/css/215619.html