0

サイトの右側のサイドバーで「自家製」の php カレンダーを使用しています。サイト本体は1000px固定です。イベントが予定されているカレンダーの日付にカーソルを合わせると、そのイベントの詳細を示す div が表示されます。視覚的な表現は次のとおりです。

ここに画像の説明を入力

ここでの問題は、通常、イベント ボックスが本体の境界を超えていることです。小さいモニターでは、ボックスが画面の右側からはみ出し、読み取ることができません。右ではなく左に倒してみたのですが、これでは本文が隠れてしまい、変な感じになってしまいます。ボックスを右に倒すためにできることはありますか?必要に応じて (小さい画面で表示する場合)、左に押しますか? フロートに似ていると思います。

ありがとう。

編集:申し訳ありませんが、ボックスを表示する方法について言及するのを忘れていました。それは完全に CSS 主導です。包含要素は相対的に配置され、ボックスは絶対的に配置されます。それらはページ外に保持され (左: -9999px;)、カレンダー セルにカーソルを合わせると表示されます。このプロセスはより迅速なようです。したがって、この問題を回避するように要素を配置することはできません。

ボックスをセルの左側に配置したくありません。訪問者の画面サイズのために特に必要でない限り、右に配置したい。

4

2 に答える 2

0

これはCSS/Javascriptの質問です。

最初の方法:{position:absolute;を割り当てます。right:0}はポップアップdivに、{position:relative}はそれを含むdivにあるため、常に左に浮かんでいます。

2番目の方法:javascript / jQueryを使用してポップアップdivの右端の位置を計算し、divが端から突き出る場合は左端を変更します。

于 2012-09-26T22:19:01.213 に答える
0

Javascriptの場合:

  1. ドキュメントのサイズを確認します(右端のピクセルを見つけるため)。
  2. ボックスの右端のピクセルを確認します
  3. document.rightからbox.rightを引き、その量だけボックスを左に移動します

CSSの場合:

ボックスの位置を絶対にし、right: -10;

于 2012-09-26T22:19:36.553 に答える