修改和切换浮动元素的位置答案

【问题标题】：Modify and switch positions of floating elements修改和切换浮动元素的位置
【发布时间】：2011-02-13 05:31:58
【问题描述】：

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

【问题讨论】：

【解决方案1】：

最简单的方法是使用insertAfter 方法选择第一个元素并将其放在第三个之后。他们选择第四个元素并使用insertBefore 在行中的第一个元素之前插入。但是使用这种方法可能会导致在重新排列时元素会在一段时间内处于不正确的位置。

第二种方式可能是这样的：

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

元素应留在原处并在不移动其他元素的情况下被替换。

【讨论】：