0

小さなスケジュールの概要を作成する必要があります。私の問題は、真夜中に行われるイベントです。

私がやりたいことは次のとおりです。

左側には、「列」(私は div で作業します) と日があります。最初の列の横にある 2 番目の列には、私のイベントがあります。

同じ日に開始および終了するイベントについては問題ありません。イベントはテキストではありません。これは派手な div であり、情報やアイコンを追加するものもありますが、ここではテキストとして表示します。

2012-02-25 イベント1 (8:00-11:00)
              {若干のスペース}
              イベント2 (13:00～15:00)
              {20px スペース}
--------------------------------------------
2012-02-26 {20px スペース}
              イベント 3 (8:00-11:00)
              {若干のスペース}
              イベント4 (13:00～15:00)

罰金！しかし今、真夜中に行われたイベントの場合、イベント div を 2 日を分割する線の上に配置して中央に配置したいので、各イベント div の高さは 30px で、線の高さは 2px です。つまり、14px にしたいということです。開始日に夜間イベントの 14 ピクセル、終了日に 14 ピクセル。

毎日の「行」も div です。だから私は2つの「行」divと行の上に夜通しのイベントを配置したい（たぶん<hr>、多分<div>）。

今私の質問は、これは可能ですか？

よろしくお願いします

編集：

ここに jsFiddle があります: http://jsfiddle.net/NoiZy/6Dkta/

そして、赤い線の上に 1 つの追加のイベントを、毎日半分のサイズで配置する必要があります。

4

1 に答える 1

1

私はこのようなことをするかもしれませんhttp://jsfiddle.net/6Dkta/61/ 毎日の行を'position：relative'に設定してから、動的に追加できるようにクラスに与えた重複イベント。クラスtwoDayは、位置を絶対に設定し、下部を-34pxに設定します。このように、行のサイズに関係なく、常に下部と重なります。これがセットアップで機能するかどうかはわかりませんが、フィドルでは機能します。

于 2012-09-05T18:28:33.427 に答える