修改并切换浮动元素的位置

Question

如何修改浮动元素的位置？是否可以使用简单的HTML / CSS？如果没有，使用JavaScript w /和/或w / o jQuery的最简单方法是什么？

示例：http://jsbin.com/ufeme3/2

Answer 1

最简单的方法是选择第一个元素，然后使用insertAfter方法将其放在第三个元素之后。他们选择第四个元素并使用insertBefore在第一行元素之前插入。但是使用这种方法可能会导致情况，在重新安排的时刻，元素将在不正确的位置暂时存在。

第二种方式可能如下：

1. 使用position: relative将所有5个元素包装在某个包装器中。
2. 在切换元素之前，取每个元素的位置（例如jQuery的position方法）并为它们设置（top，left等），另外添加{{1}对他们来说。
3. 隐藏第一个和第四个元素 - 其他元素将保留在其位置，因为它们绝对定位。
4. 将删除的元素放在正确的位置。
5. 删除以前添加的css属性。

元素应留在自己的位置并在不移动他人的情况下进行替换。