javascript - 修改和切换 float 元素的位置

Question

如何修改 float 元素的位置？简单的 HTML/CSS 有可能吗？如果没有，使用带和/或不带 jQuery 的 JavaScript 的最简单方法是什么？

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

Answer 1

最简单的方法是使用 insertAfter 方法选择第一个元素并将其放在第三个元素之后。他们选择第四个元素并使用 insertBefore 在行中的第一个元素之前插入。但是使用该方法可能会导致元素在重新排列时暂时位于错误位置的情况。

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

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

元素应该留在它们的位置并且在不移动其他元素的情况下被替换。