对 div 进行排序，不留任何间隙
有什么方法可以调整 div 元素的大小而不在页面上留下间隙吗？我认为唯一的选择是计算可能生成的间隙并移动元素。 预先感谢您的任何想法。
Is there any way I could resize my div elements without leaving gaps on the page? I think the only option is to calculate the possible generated gaps and move the elements around.
Thanks in advance for any idea.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
onclick 您可以将卡片的 div 位置更改为绝对位置并增加 z-index，以便它显示在所有其他卡片之上。我建议您在每张卡片周围创建另一个具有相对定位的包装 div，以便在切换到卡片上的绝对定位时将边界锁定到位。
该解决方案将允许除当前选定的卡之外的所有卡保持其位置。
onclick you could change the positioning of the card's div to absolute and increase the z-index so that it is displayed above all other cards. I would suggest you create another wrapper div around each card with relative positioning to lock the boundaries in place when you switch to absolute positioning on the card.
this solution would allow all cards except the currently selected one to maintain their position.
最简单的解决方案是再次重新排列所有卡片（不仅仅是调整 div 元素的大小）
The simplest solution will be to rearrange all the cards again (not just resize the div element)
我建议你处理点击事件，并且当你所有的 div 都浮动时，定位本身并不能解决你的问题。相反，创建一个包含所有卡片的数组，然后在单击事件时从其中删除所选的卡片，并添加另外四个具有卡片大小的空 div（与您的卡片具有相同的类）。将它们放在扩展卡覆盖的地方。展开的卡片成为绝对定位并仅隐藏那些空的 div，而其余卡片保持排序并位于正确的位置（因为浮动）。当您折叠卡片时，只需从数组和 html 标记中删除这四个 div 即可。
I suggest you to handle on click event and as you have all you divs floated, positioning itself doesn't solve your problem. Instead, create an array of all your cards and on click event remove your selected card from there and add additional four empty divs (with the same class as your card) with which have card size. Put them onto place which is covered by your expanded card. Expanded card become absolute positioned and hide only those empty divs, while the rest of cards remain sorted and on their right places (because of floating). When you collapsing card, just remove this four divs from array and html markup.