부모 div를 지정하지 않고 child div가 부모를 확장하지 못하게하는 방법은 무엇입니까?

Question

나는이 사람이 내 뇌의 거미줄을 닦아 주길 바래. 나는 (시스템 내가 ASCII 아트로 갔다, 그래서 나에게 GIF를 게시 할 수 없습니다)

|--------------------------------------------------------------------| 
| Browser Window              | 
|                 | 
| |--------------------------------------------------|    | 
| | Parent DIV          |    | 
| |             |    | 
| | |-----------------------------------------|  |    | 
| | | Child DIV #1       |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |-----------------------------------------|  |    | 
| |             |    | 
| |             |    | 
| | |-----------------------------------------|  |    | 
| | | Child DIV #1       |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |           |  |    | 
| | |-----------------------------------------|  |    | 
| |             |    | 
| |             |    | 
| |--------------------------------------------------|    | 
|                 | 
|                 | 
|                 | 
|                 | 
|--------------------------------------------------------------------| 

내가이 개 자식 된 div 포함하는 부모 DIV를하고 싶은 여기에 설명하기 위해 노력했다. 하위 div # 1에는 긴 단락이 있습니다. 하위 DIV # 2 테이블에 표시되는 가변 너비 콘텐츠가 포함되어 있습니다.

상위 DIV가 하위 DIV # 2의 너비까지 확장되도록하고 하위 DIV # 1을 상위 DIV의 너비로 확장하고 부모를 더 이상 확장하지 않을 경우를 원합니다.

나는 3 개의 DIV를 모두 float : left로 설정했습니다.

하위 DIV # 2 만 포함하는 경우 부모 DIV는 테이블 너비 (예 : 패딩 등)로 확장됩니다. DIV # 1을 포함하자마자 부모 DIV는 Child DIV # 1이 너무 넓기 때문에 브라우저 창 너비로 확장됩니다.

나는 부모 DIV의 너비를 제한 할 수 있지만 자식 DIV # 2의 가변 너비 때문에 이것을하고 싶지 않습니다. 자식 DIV # 1의 너비를 제한 할 수 있지만 자식 DIV # 2 및 DIV # 2 같은 너비를 가변 너비가 있기 때문에 싶지 않기 때문에이 작업을 수행하고 싶지 않습니다.

각 상자의 내용이 다양하기 때문에 높이를 제한하고 싶지 않습니다.

이러한 결과를 얻는 다른 방법이 있습니까?

덕분에,

랄프

Answer 1

임 없습니다 나는 당신을 이해하지만, 내가 플로트를 제거하려고 할 것이다 완전히 확인 : 내부 div의 모두에서 왼쪽. 부모의 너비를 auto로 설정하고 자식의 너비를 100 %로 설정합니다. 이렇게하면 부모가 더 큰 div (자식 2)의 크기를 정한 다음 자식 1을 해당 컨테이너의 크기로 확장 할 수 있습니다. 이게 도움이 되길 바란다. 또한 내가 가지고있는 것을 볼 수 있도록 js 바이올린을 게시 할 수 있다면 더 잘 할 수있을 것입니다.

Answer 2

흥미로운 질문입니다. js 솔루션에 항복하기 전에 많은 노력을했지만 이러한 결과를 얻을 수있는 유일한 방법은 희망에 대한 답변을 제시하는 것이 었습니다.

가 나는 working sample 여기 온 :

$(document).ready(function() { 
    $('#div1').css('width', $('#div2').css('width')); 
}); 

: jQuery를 사용하여 기본적으로

, 당신은 그런 일을 코딩 할 수있다