0

亲爱的互联网长老们——我给自己造成了一个头疼的问题,希望你能帮忙:-)

这是一个两部分的问题。我有一个包含三个面板的页面,并且想要一个水平幻灯片。为此,我创建了按钮,请在此处查看现场演示。

1.水平幻灯片,响应 当点击右上角按钮“两个右窗格”时,我希望页面只显示:只有两个右窗格。这在大屏幕上不是问题,但我无法让它在稍小的屏幕上工作(媒体查询和进一步的响应能力,我想我能够弄清楚)。

相似地; 单击“单个左窗格”时,我希望它可以拉伸第三个(最右侧)面板,并隐藏另外两个。

显然,我希望它响应 100% 的视口。

2. Highchart 我无法让 Highchart 图表根据左上角的滑动按钮采取相应的行动。如果我调整整个窗口的大小, highchart 会调整,但是在滑动面板时我无法调整它。有关有效图表的演示,请在第三个面板中向下滚动(这是“自制”图表)。

我试图在下面的屏幕截图中说明问题。

(我已经发布了与同一页面有关的另一个问题,如果您愿意看一下)。

我怀疑这很简单,但我一辈子都看不到我哪里出错了。任何提示将不胜感激。祝一切顺利。

滑动,查看

单个右面板视图

4

2 回答 2

1

Highcharts 仅在调整窗口大小时才会调整大小,如果要调整图表大小chart.setSize(w,h),请参阅参考

于 2013-08-05T14:19:34.780 回答
1

好吧,好人,我自己想通了……为了他人的利益;我的解决方案是将前两列的宽度设置为固定(或者更确切地说;最大宽度),从而使用 calc 来计算第三列的大小,减去两个固定宽度的 div。

  width: -webkit-calc(98% - 520px);
 width: calc(98% - 520px);

对于问题的 Highchart 部分,非常感谢@Pawel 的及时回答。我还没有完全解决,因为我们目前正在讨论是否使用 Highcharts 是要走的路。如果是这样,我想我以后可能会带着更多问题回来。

于 2013-08-07T22:13:06.517 回答