Question

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

我希望能够打印图形，所以我用这样设置了一个带有CSS的@media print子句：

@media屏幕 { div.plot { 向左飘浮; font-family：arial; 宽度：575px; 身高：300px; } }

@media print { div.plot { 向左飘浮; font-family：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像素宽。

我得到的两张图表仍有575像素宽，然后相互碰撞。

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

Answer 1

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

Answer 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。

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

2 个答案: