0

親愛なるインターネットの長老たち - 私は自分自身のために頭痛の種を作りました。あなたが助けてくれることを願っています :-)

これは 2 部構成の質問です。3 つのパネルを含むページがあり、水平方向のスライドが必要です。このために、ボタンを作成しました。ここでライブデモを参照してください。

1.水平スライド、レスポンシブ 右上のボタン「2つの右側のペイン」をクリックすると、ページにそれを表示したい:2つの右側のペインのみ. これは大きな画面では問題ありませんが、少し小さい画面では動作しません (メディア クエリとさらなる応答性については、理解できると思います)。

同様に; 「単一の左ペイン」をクリックすると、3 番目 (右端) のパネルが引き伸ばされ、他の 2 つのパネルが非表示になります。

明らかに、100% ビューポートに応答するようにします。

2. ハイ チャート 左上のボタンのスライドに応じて、ハイチャート チャートを適切に動作させることができません。ウィンドウ全体のサイズを変更すると、ハイチャートは調整されますが、パネルをスライドさせると調整できません。機能するグラフのデモについては、3 番目のパネルを下にスクロールします (これは「自家製」のグラフです)。

以下のスクリーンショットで問題を説明しようとしました。

(同じページに関連する別の質問を投稿しました。ご覧になりたい場合は)。

かなり単純だと思いますが、私の人生ではどこが間違っていたのかわかりません。どんなヒントでも大歓迎です。ではごきげんよう。

スライド、ビュー

単一の右パネルのビュー

4

2 に答える 2

1

まあ、良い人たち、私はそれを自分で考え出しました... 他の人の利益のために。私の解決策は、最初の2つの列の幅を固定(または最大幅)に設定し、それによってcalcを使用して3番目の列のサイズを2つの固定幅divを引いて計算することでした。

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

質問のハイチャートの部分については、@Pawel の迅速な回答に感謝します。現在、ハイチャートを使用するかどうかについて話し合っているため、完全には解決していません。もしそうなら、後でもっと質問をして戻ってくるかもしれないと思います。

于 2013-08-07T22:13:06.517 に答える