jQuery设置具有绝对父对象的div宽度的动画

我正在尝试设置

div

的宽度动画，该div由父元素包装，父元素定位在

absolute

它自己的父元素上。通过展示一个例子来解释可能更容易

应该发生的是，当单击红色矩形时，绿色框的宽度被设置为一定的宽度，而红色矩形位于其旁边。这一切在IE和Firefox中都很好，但在chrome中运行时，红色矩形会跳到绿色框的下方。所以我只是想知道我是否做了傻事，或者是否有人知道我可能做错了什么

---

谢谢，

没什么错，只是浏览器认为没有足够的可用空间让两个元素相邻显示：）

---

小提琴链接：

没什么错，只是浏览器认为没有足够的空间让两个元素相邻显示：）

---

Fiddle link:

问题是由于浏览器认为容器div不够大，无法同时包含这两个元素。这是由您的绝对定位引起的。如果必须使用绝对定位，则需要确保div#banner包装足够大，以适应内容的增长

---

您可以按x10所述在CSS中强制设置div的宽度，也可以在单击处理程序中使用JavaScript更改其宽度，以便仅根据需要打开它。

问题是由于浏览器认为容器div不够大，无法同时包含这两个元素。这是由您的绝对定位引起的。如果必须使用绝对定位，则需要确保div#banner包装足够大，以适应内容的增长

---

您可以按照x10所说的在CSS中强制设置div的宽度，或者在单击处理程序中使用JavaScript更改其宽度，以便只按需要打开它。

如果在

#横幅包装器

周围放置边框，您将看到发生了什么

看起来，一旦内容改变大小，chrome不会重新调整元素的大小（因此它会导致浮动元素断裂，因为它们不适合在一行中）

另一种方法是对内部元素使用

display:inline block

---

示例：

如果您在

#横幅包装

周围放置边框，您将看到发生了什么

看起来，一旦内容改变大小，chrome不会重新调整元素的大小（因此它会导致浮动元素断裂，因为它们不适合在一行中）

另一种方法是对内部元素使用

display:inline block

---

示例：

给父母任何一方一个足够大的宽度以适合动画，似乎可以解决问题，您尝试过吗？给父母任何一方一个足够大的宽度以适合动画，似乎可以解决问题，您尝试过吗？啊！这么简单的修复。谢谢啊!！这么简单的修复。谢谢

#banner-wrapper {
    min-width: 100%;
}