2012-04-08 1 views
9

여기에 약간의 문제가 있습니다.이 값은 여기에 나와 있습니다.div 너비를 자식 너비를 기준으로 늘립니다.

500px 너비의 창이 있습니다. 내 문서 내부 , 나는 아무 지정된 폭 외부 DIV를 가지고 있지만, 다음과 같은 CSS :

.t1{ 
    display:inline-block; 
    width:400px; 
} 

합니다 (통지 :이 사업부 내부

.outer{ 
    white-space:nowrap; 
    background:blue; 
} 

는 다음과 같은 속성이 다른 3 개 사업부입니다 . 400px의 폭 어디에 문제가 그 선이 창보다 넓은,, 그리고 외부 사업부는 확장되지 않습니다 html로 그 다음과 같습니다.

<div class="outer"> 
    <div class="t1">1</div> 
    <div class="t1">2</div> 
    <div class="t1">3</div> 
</div> 

내가 달성하려고하는 것은 t1 클래스로 설정하지 않고 파란색 배경의 3 개의 내부 div를 갖는 것입니다. 이 예제가 생성하는 것은 창 너비로 제한된 파란색 배경입니다.

여기에 전체 예를 참조하십시오 http://jsfiddle.net/sjCTR/가 단지 CSS/HTML을 통해 얻을 수있는 어떻게 든 만약 내가 설정하지 않고, 궁금하네요

(화면이 대형 인 경우 왼쪽 하단에 적응해야합니다) 바깥 쪽 div 너비/안쪽 div 배경?

+0

잘 모르겠습니다. 문제를 이해합니다. 각'.t1'의 폭을 항상 400px 또는 항상 33 % 또는 다른 것으로 강제하려고합니까? – Godwin

+0

아니요, 여기에 입력 한 숫자는 예제에만 있습니다. 문제는 더 복잡하지만 아이디어는 바깥 쪽 div의 너비가 자손의 너비에 맞지 않을 것이라는 것입니다. –

답변

22

float: left 또는 display: inline-block-.outer을 추가하십시오.

+3

고맙습니다. 둘 다 작동합니다. 그 마법이 가능한 방법을 설명해 주시겠습니까? (왜 그것을 외부에 추가하면 확장시킬 수 있습니까?) –

+1

두통 시간에서 저를 구해줬습니다. – Bruce

0

오버 플로우 추가 : 숨김; 너비 : 100 %; 바깥 쪽