jQuery анимация ширины div с абсолютным родителем

Question

Я пытаюсь анимировать ширину div, которая обернута родительским элементом, который расположен absolute к его собственному родителю.Это, вероятно, легче объяснить, показав пример того, что я имею в виду .

. Что должно произойти, это то, что при нажатии на красный прямоугольник ширина зеленого поля анимируется до определенной шириныв то время как красный прямоугольник сидит рядом с ним.Все это прекрасно работает в IE и Firefox, но при запуске в chrome красный прямоугольник прыгает ниже зеленой рамки.Поэтому мне просто интересно, сделал ли я что-то глупое или кто-то знает, что я могу делать неправильно?

Спасибо,

Answer 1

Ничего плохого, просто браузер считает, что недостаточно места для отображения обоих элементов рядом друг с другом:)

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

Ссылка Fiddle: http://jsfiddle.net/K2UbQ/8/

Answer 2

Если вы поместите рамку вокруг #banner-wrapper, вы увидите, что произойдет.

Похоже, что chrome не изменяет размер элементов, когда его содержимое меняет размер (, и, следовательно, это вызываетэлементы с плавающей точкой, чтобы разбить, так как они не помещаются в одну строку ) ..

В качестве альтернативы можно использовать display:inline-block для внутренних элементов.

Пример: http://jsfiddle.net/K2UbQ/10/

Answer 3

Проблема вызвана тем, что браузер считает, что контейнерный элемент div недостаточно велик, чтобы содержать оба элемента. Это связано с вашим абсолютным позиционированием. Если вы должны использовать для этого абсолютное позиционирование, вам нужно убедиться, что div # banner-wrapper достаточно велик, чтобы соответствовать росту контента.

Вы можете принудительно установить ширину div в CSS, как говорит x10, или изменить его ширину, используя JavaScript в вашем обработчике кликов, чтобы открывать его только по мере необходимости.