사업부 절대적으로 위치한 콘텐츠의 크기로 확장

Question

나는 절대적으로 배치 된 사업부가 몇 곳있다. 최상위 수준의 클릭 가능 영역은 자식 영역으로 확장되지만 그려진 영역은 확장되지 않습니다. 그려진 영역이 모든 컨테이너 div를 둘러싸도록합니다. 코드의

JSFiddle는 여기에있다 - 당신이 (div의에 의해 숨겨진) 왼쪽 상단 모서리에 작은 빨간색 상자를 알 수있는 몇 가지 새로 고침 후 http://jsfiddle.net/VolatileStorm/C29P8/

. 이것은 컨테이너이며, 나는 아이들을 둘러싸고 싶습니다.

아이디어가 있으십니까? 고맙습니다.

Answer 1

JS 옵션을 이미 사용하고 있으므로 CSS를 사용하여 보겠습니다. 그것은 해킹의 무언가로 건너 수 있지만, 그것을 작동 : http://jsfiddle.net/C29P8/131/

아이디어는 모든 위치의 요소를 제거 설정하는 것입니다 그 내용에 맞게 확장 float: left;에 용기 ".pile"(또한 메모를 설정에 위치 지정이 없으므로) 을 ".note"로 사용하고 padding-left: 110px을 사용하여 메모를 이동합니다 (빨간색 테두리 내에서 채우기 만하면 메모의 회전이 허용됩니다). 그래서 각 음은 서로 겹쳐서 그려집니다.

나는 그것을 설명하기에 훌륭하지 않다. 그래서 나는 JSFiddle 페이지에서 추가하고 변경 한 코드에 대해 주석을 달았다. 분명히 명확해야한다.

Answer 2

절대적으로 배치 된 요소가 페이지의 흐름에서 벗어나기 때문에 JS를 사용하여 JS를 사용하여 상위 요소의 치수를 읽거나 상대 div의 높이를 & 너비로 설정할 수 있습니다.

Answer 3

getBoundingClientRect()을 사용하여 필요한 너비를 알아보십시오.

실무 데모 : http://jsfiddle.net/C29P8/137/.