如何在javascript和html中创建堆叠和重新排列div的效果？

Question

假设我有一个带有两个按钮来添加框和删除框的 div：

<div id="container" height=500 width=300>
</div>
<button>Add</button>
<button>Remove</button>

单击“添加”会将一个 div“添加”到宽度为“200”且高度为“200”且带有字母“X”的容器中。再次单击“添加”会在其正上方添加一个相同大小的框。

单击 div 上的任何“X”都会导致该 div 消失，并且其下方的其他 div 会向上滑动以填充其空间。

点击移除会移除顶部的盒子，并导致下面的任何其他 div 向上滑动以占据其空间。

如何在Javascript中实现这个效果？

Answer 1

jQuery 的slideToggle 效果可用于隐藏一个 div 并将其他的滑动到一起

如需更高级的库，请查看Isotope