0

私はテーブル列を取得し、そこにいくつかの div を動的に配置しました。div は container-div の子であるため、その中に絶対配置できます。

次に例を示します。

<div class="container" style="width: 100px">
  <div id="div1" style="position:absolute;top:50px;height:100px;width:100px"></div>
  <div id="div2" style="position:absolute;top:50px;height:100px;width:100px"></div>
</div>

ここでの最初の問題は、div2 が div1 をカバーしていることです。したがって、div1 には 50px の幅が必要で、div2 にも必要です。div2 は左に移動する必要があります: 50px。div が他の div をオーバーレイしているかどうかを確認する方法はありますか? または、列内のすべての div に適合する jQuery プラグインはありますか?

これが私が必要とする例です。そのGoogleカレンダーから：

例

編集：現時点では、JavaScriptでこれらを行うことができます：

ここに画像の説明を入力

しかし、私はこれらが必要です: ここに画像の説明を入力

予定 7 と 6 は入れ替える必要があります。したがって、それらは空きスペースに適合します。アイソトープでこれらを行うことはできますか?

編集: isotope を使用して datetime で並べ替え、css の top プロパティを手動で設定できますか?

4

2 に答える 2

1

次のようなプラグインを試すことができます。

http://masonry.desandro.com/

于 2012-08-29T15:22:32.460 に答える
0

use css property called Z-index. Z-index manage them as a layer. This will allow you to overlapping divs on one another.

于 2012-08-29T15:57:12.103 に答える