私はテーブル列を取得し、そこにいくつかの 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 プロパティを手動で設定できますか?