设置 CSS 宽度似乎不适用于 @media print 中的 Flot 图答案

【问题标题】：Setting CSS width does not seem to work with Flot graphs in @media print设置 CSS 宽度似乎不适用于 @media print 中的 Flot 图
【发布时间】：2011-06-20 19:15:19
【问题描述】：

我有一个屏幕，可以非常愉快地并排显示两个浮动图。

我希望能够打印图表，因此我使用 CSS 设置了一个 @media 打印子句，如下所示：

@媒体屏幕 { div.plot { 向左飘浮; 字体系列：宋体；宽度：575px；高度：300px； } }

@媒体打印 { div.plot { 向左飘浮; 字体系列：arial；宽度：300px；高度：300px； } }

我的 HTML 如下所示：

        <div id="graph" class="plot"></div>
        <div class="plot" style="width:50px"></div>
        <div id="graph2" class="plot"></div><p></p>

据我所知，印刷版应该生成两个图形，每个 300 像素宽。

发生的情况是，我得到两个图形，它们仍然具有较大的 575px 宽度，然后它们相互碰撞。

我对 CSS 宽度控制图形宽度的理解是否正确，还是我必须使用另一个 CSS 控件来固定图形的宽度？

【问题讨论】：

标签： css flot

【解决方案1】：

您的问题很可能是当您调用$.plot 时，它会在您的#graph 占位符内创建画布元素。这些画布元素使用占位符的大小，当plot 被调用时，来设置自己的宽度和高度。当您点击打印时，样式表会更改为打印版本，但您还需要重新调用 $.plot 或使用 flot resize plugin。

【讨论】：

调整大小插件是我需要下载的其他东西还是它是 flot 的一部分，我只需要拨打电话？以防万一，我必须让它与 IE6 一起工作......
它会作为一个单独的文件出现在 flot zipfile 中。在包含 jquery.flot.js 之后，您需要包含脚本 jquery.flot.resize.js。

【解决方案2】：

这对我来说非常适合：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test </title>
    <style type="text/css" media="screen">
    div.plot { float: left; font-family: arial; width: 575px; height: 300px;border:1px solid red; }
    </style>
    <style type="text/css" media="print">
    div.plot { float: left; font-family: arial; width: 300px; height: 300px;border:1px solid red; }
    </style>
</head>
<body>
    <div id="graph" class="plot"></div>
    <div class="plot" style="width:50px"></div>
    <div id="graph2" class="plot"></div><p></p>
</body>
</html>

您的错误可能在于您定义@media print 的位置/方式。

否则，可能是您的 div id="graph/2" 导致问题...（例如，如果您在其中有一个太大的 img）（尝试添加overflow:hidden!)

PS：为了在media和print css之间轻松切换，我使用web developper toolbar。

【讨论】：

感谢您为我测试它，今天不用了，当我尝试您的解决方案时，它们都不适合我。我想这只是我的运气。
overflow:hidden 确实阻止了图表相互碰撞，但不幸的是并没有缩小图表，以便我可以完整地看到每个图表。
这似乎是#graph 的内部内容对于它的空间来说太大的问题。我不知道在 div 中创建了哪些元素，但您可以尝试在 CSS 中调整它们的大小（例如#graph *, #graph2 * {max-width:300px;}）。帮不了你了，因为我从来没有玩过浮点图。