인라인 블록 부모가 자식 너비로 접히지 않음

Question

플로팅 대신 인라인 블록 요소를 사용하여 응답 성있는 상자 모양을 나타냅니다. 요소가 인라인되면 래퍼 너비가 올바르게 작동합니다. 수직으로 바뀌면 래퍼의 너비가 자식 너비로 축소되는 대신 컨테이너의 너비로 확장됩니다. 이것에 대한 희망이 있습니까? 나는 IMG의 DIV를 제거하면

HTML: 
<div class="container"> 
    <div class="wrapper"> 
    <div class="item item1"> 
     <img src="http://www.noupe.com/wp-content/uploads/trans/wp-content/uploads/2010/07/th_IMG_1826s.jpg" /> 
    </div> 
    <div class="item item2"> 
     <h2>Text Div</h2> 
     <ul> 
      <li>Item one</li> 
      <li>Item two</li> 
     </ul> 
    </div> 
</div> 

CSS: 
img { 
    width: 325px; 
    height: auto; 
} 

div.container { 
    display:block; 
    width: 100%; 
    max-width: 1000px; 
} 

div.wrapper { 
    display: inline-block; 
    background: #544; 
    text-align: center; 
    padding: 15px; 
} 

div.item { 
    display:inline-block; 
    width: 325px; 
} 

가, 래퍼가 완벽하게 작동합니다 :

여기에 코드입니다. 나는 아주 명백한 무엇인가 놓치고있는 것처럼 느낀다.

편집 : 인라인 블록은 그것이 가능한 공간을 채우도록 확장 것이다 인해 디스플레이를 갖는 랩퍼 소자 http://jsfiddle.net/U3hus/13/

Answer 1

컨테이너가 고정 너비이고 래퍼의 너비가 지정되지 않은 경우와 관련이 있습니다. 래퍼가 문제를 해결할 너비를 지정해야합니다.

.container { 
    width: 1000px; 
} 

.wrapper { 
    display: inline-block; 
    background: #544; 
    text-align: center; 
    padding: 15px; 
    width: 100%; 
} 

거친 예 : http://jsfiddle.net/U3hus/13/

Answer 2

다음 jsfiddle 분실. 또한 width 또는 max-width가 랩퍼에 대해 설정되어 있으므로 사용 가능한 모든 공간을 사용합니다. 이를 해결하는 가장 좋은 방법은 미디어 쿼리를 사용하여 래퍼 요소의 너비를 설정하는 것입니다.