如何將div擴展爲其內容寬度當它大於其父項？

Question

我試圖建立一個輪播視圖。爲此，我有一個表示視口的父div，一個內容div，持有要在視圖中顯示的項目以及未知數量的div，表示視圖中顯示的項目。

<div id="viewport"> 
    <div id="content"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     ... 
    </div> 
</div> 

父項和項目大小事先已知，但我希望內容大小與項目一起增長。使用以下CSS，這些項目按內聯方式顯示，但內容的寬度只會擴展到與其父寬度相匹配。

#viewport { 
    position: absolute; 
    width: 400px; 
    height: 200px; 
    overflow: hidden; 
} 

#content { 
    white-space: nowrap; 
} 

.item { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
} 

如何才能使內容div擴展到與其子級大小相匹配？這裏是我所說的JSFiddle：http://jsfiddle.net/j4LnB/（紅色邊框顯示內容的大小）。

Answer 1

您可以在＃內容DIV

Answer 2

視口的div使用min-width，而不是width應該做的伎倆使用display: inline-block;。這允許內容div擴展到完整的子節點寬度。

#viewport { 
    position: absolute; 
    min-width: 400px; 
    height: 200px; 

http://jsfiddle.net/j4LnB/1/