Fatal编程技术网
  • css/
  • 设置CSS宽度似乎不适用于@media print中的Flot图

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

css

设置CSS宽度似乎不适用于@media print中的Flot图,css,flot,Css,Flot,我有一个屏幕，可以非常愉快地并排显示两个flot图 我希望能够打印图形，所以我用CSS设置了一个@media print子句，如下所示： <div id="graph" class="plot"></div> <div class="plot" style="width:50px"></div> <div id="graph2" class="plot"></div><p

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

我希望能够打印图形，所以我用CSS设置了一个@media print子句，如下所示：

        <div id="graph" class="plot"></div>
        <div class="plot" style="width:50px"></div>
        <div id="graph2" class="plot"></div><p></p>
@媒体屏幕 { 分区图{ 浮动：左； 字体系列：arial； 宽度：575px； 高度：300px； } }

@媒体印刷品 { 分区图{ 浮动：左； 字体系列：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 width控制图形宽度的理解是否正确，还是我必须使用另一个CSS控件来固定图形的宽度？

这对我来说非常合适：

<!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>


试验
div.plot{float:left；字体系列：arial；宽度：575px；高度：300px；边框：1px纯红色；}
div.plot{float:left；字体系列：arial；宽度：300px；高度：300px；边框：1px纯红色；}
您的错误可能在于您定义
@media print
的位置/方式

否则可能是您的div id=“graph/2”导致了问题。。。（例如，如果您有一个太大的
img
）（尝试添加
overflow:hidden
！）

PS：为了在
媒体
和
打印
css之间轻松切换，我使用了。

这对我来说非常适合：

<!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>


试验
div.plot{float:left；字体系列：arial；宽度：575px；高度：300px；边框：1px纯红色；}
div.plot{float:left；字体系列：arial；宽度：300px；高度：300px；边框：1px纯红色；}
您的错误可能在于您定义
@media print
的位置/方式

否则可能是您的div id=“graph/2”导致了问题。。。（例如，如果您有一个太大的
img
）（尝试添加
overflow:hidden
！）

PS：为了在
媒体
和
打印
css之间轻松切换，我使用了。

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

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

感谢您在我尝试您的解决方案时为我测试它，不用说今天，这两种方法对我都不起作用。我想这只是我的运气。溢出：隐藏确实阻止了图形相互碰撞，但不幸的是没有缩小图形以便我可以完整地看到每个图形。这似乎真的是因为
#graph
的内部内容对于其空间来说太大了。我不知道在div中创建了哪些元素，但是您可以尝试在CSS中调整它们的大小（例如，
#graph*，#graph2*{max width:300px；}
）。我从来没有玩过flot graph，帮不了你这么多。感谢你今天在我尝试你的解决方案时为我测试它，这两种方法对我都不起作用。我想这只是我的运气。溢出：隐藏确实阻止了图形相互碰撞，但不幸的是没有缩小图形以便我可以完整地看到每个图形。这似乎真的是因为
#graph
的内部内容对于其空间来说太大了。我不知道在div中创建了哪些元素，但是您可以尝试在CSS中调整它们的大小（例如，
#graph*，#graph2*{max width:300px；}
）。我从来没有玩过flot graph，帮不了你太多。resize插件是我需要下载的其他东西还是flot的一部分，我只需要打个电话？为了以防万一，我必须让它与IE6一起工作……它将作为一个单独的文件出现在flot zipfile中。在包含
jquery.flot.js
之后，您需要包含脚本
jquery.flot.resize.js
。resize插件是我需要下载的还是flot的一部分，我只需要打个电话？为了以防万一，我必须让它与IE6一起工作……它将作为一个单独的文件出现在flot zipfile中。在包含
jquery.flot.js
之后，需要包含脚本
jquery.flot.resize.js
。