인라인, 랩핑 할 수없는 요소의 컨테이너에 대한 유체 너비

Question

약간의 CSS 문제가 있습니다.

다음 예제와 같이 일부 div 요소가 있습니다.

<div class="outer-container"> 
    <div class="inner-container"> 
     <div class="block">text</div> 
     <div class="block">text</div> 
     <div class="block">text</div> 
     <!-- More "block" divs here --> 
    </div> 
</div> 

내 목표는 그하는 CSS 기반의 솔루션을 찾을 수 있습니다 : 클래스 = "블록"div의 동적 번호, 고정 폭 각이있다.

1. class="block" div를 새로운 줄 바꿈없이 표시합니다.
2. 위의 것과 같이 가변 숫자 class="inner-container" divs를 지원합니다. 각각은 고유 한 줄로 표시됩니다.
3. 내용물의 폭과 일치하도록 외부 용기를 유체로 "shrink-wrap" 으로 설정하십시오.

의견이 있으십니까? 이것이 당신이 찾고있는, 그러나 시작 될 일 경우

Answer 1

100 % 확인 : display: inline-block 및 white-space: nowrap 각 block 요소를 설정하여

http://jsfiddle.net/r4dEX/3/

, 그것의 요소를 허용해야 서로 나란히 앉아 있지만 내용이 사용 가능한 공간보다 길면 새 줄로 감싸지 않습니다 (대신 block이 새 줄로 이동합니다).

각 inner-container은 고유 한 행 (display: block은 div의 기본 동작 임)에 표시됩니다.

외부 컨테이너를 display: inline-block으로 설정하면 해당 내용에 맞게 '줄 바꿈'이 발생합니다.

Answer 2

Here은 블록이 인라인이고 내부 컨테이너의 너비가 고정되어 있고 외부 컨테이너가 맞춰 지도록 축소되어있는 예입니다.