jquery - 将 div 框堆叠成两列。但是当右边的盒子被移除时，它后面的所有盒子都应该相应地排列

Question

我将高度和宽度相同的 div 框堆叠成两列，如下所示：

是否有可能使它的行为方式......当左侧的任何框被删除（使用jQuery）时，右侧最上面的框将移动左侧的底部位置。所以本质上，盒子在粉红色箭头指示的方向上移动。

Answer 1

您可以添加删除事件并在您的 div 框中进行检查。然后将第一个元素附加到另一列

$('.yourDivBox').bind('remove', function() {
$('.secondColumn').first().appendTo('.firstColumn');
});

像这样的东西。抱歉，我没有时间检查我的代码

Answer 2

可以在 CSS3 中完成，某些浏览器可能不支持！我在下面创建了一个示例：

http://jsfiddle.net/swxn4/