javascript - ギャップを残さずにdivを並べ替える

Question

ページにギャップを残さずにdiv要素のサイズを変更する方法はありますか？唯一の選択肢は、発生する可能性のあるギャップを計算し、要素を移動することだと思います。アイデアを事前に感謝します。

例-（サイズを変更するには、カードをクリックしてください）

Answer 1

クリックイベントを処理することをお勧めします。すべてのdivがフロートしているため、ポジショニング自体では問題は解決しません。代わりに、すべてのカードの配列を作成し、クリックイベントで、選択したカードをそこから削除し、カードサイズを持つ4つの空のdiv（カードと同じクラス）を追加します。拡張カードで覆われている場所にそれらを置きます。展開されたカードは絶対位置になり、それらの空のdivのみを非表示にしますが、残りのカードはソートされたままで、適切な場所に配置されます（フローティングのため）。カードを折りたたむときは、この4つのdivを配列とhtmlのマークアップから削除するだけです。

Answer 2

最も簡単な解決策は、すべてのカードを再配置することです（div要素のサイズを変更するだけではありません）

Answer 3

onclickを使用すると、カードのdivの位置を絶対に変更し、z-indexを増やして、他のすべてのカードの上に表示されるようにすることができます。カードの絶対位置に切り替えるときに境界を所定の位置にロックするために、相対位置で各カードの周りに別のラッパーdivを作成することをお勧めします。

このソリューションでは、現在選択されているカードを除くすべてのカードがその位置を維持できます。