对div进行排序而不留任何间隙

Question

有没有什么方法可以调整我的div元素大小而不会在页面上留下空白？我认为唯一的选择是计算可能产生的间隙并移动元素。 提前感谢任何想法。

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

Answer 1

最简单的解决方案是重新排列所有卡片（不只是调整div元素的大小）

Answer 2

onclick你可以将卡片div的定位更改为绝对值并增加z-index，使其显示在所有其他卡片上方。我建议你在每张卡片周围创建另一个包装器div，相对定位，当你切换到卡片上的绝对位置时，将边界锁定到位。

此解决方案将允许除当前所选卡之外的所有卡保持其位置。

Answer 3

我建议你处理点击事件，因为你有所有div浮动，定位本身并不能解决你的问题。相反，创建一个包含所有卡片的阵列，并在点击事件中从那里删除您选择的卡片，并添加额外的四个空卡片（与卡片类相同），卡片大小。将它们放在扩展卡覆盖的地方。扩展卡成为绝对定位并且只隐藏那些空的div，而其余的卡保持排序并且在正确的位置（因为浮动）。折叠卡时，只需从数组和html标记中删除这四个div。