절대 부모와 함께 div의 애니메이션 폭을 조절하는

Question

div의 너비는 absolute 인 부모 요소에 의해 래핑 된 너비를 자체 부모에 애니메이션으로 표시하려고합니다. example of what I mean을 표시하면 설명하기가 더 쉽습니다.

빨간색 사각형을 클릭하면 녹색 상자의 너비가 특정 너비로 ​​움직이면서 빨간색 사각형은 그 너비와 나란히 놓입니다. 이 모든 것은 IE & Firefox에서 잘 작동하지만 Chrome에서 실행하면 빨간색 사각형이 녹색 상자 아래로 이동합니다. 그래서 나는 바보 같은 일을했는지 ​​또는 내가 잘못하고있는 일을 누군가가 알고 있는지 궁금해하고 있습니까?

감사합니다, 잘못

Answer 1

아무것도, 그것은 브라우저가 두 요소가 : 서로 옆에 표시하기위한 충분한 여유 공간이라고 생각 단지의

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

바이올린 링크 : http://jsfiddle.net/K2UbQ/8/

Answer 2

이 문제는 브라우저 div가 두 요소를 모두 포함 할 정도로 크지 않다고 생각하여 발생합니다. 이것은 절대 위치 지정으로 인해 발생합니다. 이를 위해 절대 위치 지정을 사용해야하는 경우 div # banner-wrapper가 콘텐츠의 증가를 수용 할만큼 충분히 큰지 확인해야합니다.

x10에서 말한 것처럼 CSS에서 div의 너비를 강제로 조정하거나 클릭 핸들러에서 JavaScript를 사용하여 너비를 변경하여 필요한만큼만 열 수 있습니다.

Answer 3

#banner-wrapper 주위에 테두리를 넣으면 어떤 일이 벌어 지는지 알 수 있습니다.

이

대안 .. 크롬 크기를 다시하지 않는 것처럼 그 내용을 한 번 요소의 크기 변경 (을 따라서 그들이 한 줄에 맞지 않기 때문에 휴식하기 위해 떠 요소 발생) 보이는 내부 요소에 display:inline-block을 사용합니다.

예 : http://jsfiddle.net/K2UbQ/10/