通过相对定位将两个div放在同一行上

Question

我正在尝试在我的网站上创建动画，当用户点击链接时，网站将主要内容div从页面向左移动，新内容（对应于点击的链接）飞入从右边那个空位。动画完成后，原始内容块将被删除。

我差点把它弄下来，到目前为止我所做的就是使用相对定位和jquery来动画div的运动。

具体来说，如果阻止 A 是原始div，阻止 B 是替换div，我

1. 创建 B 并通过设置left:100%
将其置于屏幕右侧
2. 使用jquery为 A 上的right:100%设置动画，以便在屏幕左侧发送 A
3. 使用jquery通过动画left:0%
从右侧飞入 B

问题是，在设置了这些新样式后，仍有一个空白区域，其中 A 最初是，而 B 现在低于该空白区域。我如何将 B 推入该空间？

Answer 1

简短回答：我相信您在 A 和 B 上缺少position:absolute。

答案很长：如果您将容器定义为position:relative，则所有新创建的元素position:absolute都将位于容器的边界框内。在这一点上，我们可以像你说的那样将两个元素紧紧地粘在一起：left:0上的 A 和left:100%上的 B 。我们可以通过更改左侧值来设置动画： A 在屏幕上显示left:-100%， B 插入left:0（这也是上一步的A位置相同。）

你可以在这里看到它 - ＆gt; http://jsfiddle.net/MVXwT/

Answer 2

相对定位对此没有帮助。

然后使用绝对定位。

你可以做的是，如果你是A到B的位置，使用jquery来改变A的位置。

$("#divA").css({"position":"absolute"});

然后将其设置为您想要的位置。

Answer 3

使用绝对有一个警告，如果此内容位于具有动态位置的容器内某处，则无法保持其与页面顶部的距离。相对定位似乎是一个更稳健的定位，您应该更改您的显示或浮动值。 列出可能的选项，使两个div保持在一行：

1. 绝对定位（位置：绝对）
2. 浮动*（浮动：左）
3. 内联块*（显示：内联块）

* A 和 B 的父容器应与 A 和 B 一样宽，以包含它们在一行。