排序div沒有留下任何空白

Question

有沒有什麼辦法可以調整我的div元素而不會在頁面上留下空白？我認爲唯一的選擇是計算可能產生的差距並移動元素。 提前感謝您的任何想法。

Example - (Please click on the cards in order to resize)

Answer 1

的onclick你可以改變卡的div來絕對的定位和提高的z-index以便它顯示在所有其他卡上方。我建議你用相對定位在每個卡周圍創建另一個包裝div，以在切換到卡上的絕對定位時鎖定邊界。

此解決方案將允許除當前所選卡之外的所有卡保持其位置。

Answer 2

最簡單的解決方法是將再次重新安排所有的牌（而不僅僅是調整div元素）

Answer 3

我建議您處理點擊事件，因爲您已將所有div浮動，定位本身並不能解決您的問題。取而代之的是，創建一個所有卡片的數組，並點擊事件從那裏刪除您選擇的卡片，並添加額外的四個空格（具有與卡類相同的卡片），其中卡片大小。把它們放在你的擴展卡覆蓋的地方。擴展牌成爲絕對定位，並且只隱藏那些空白的牌，而其餘的牌保持排序並在正確的位置（因爲浮動）。當你摺疊卡時，只需從數組和html標記中移除這四個div。