カルーセルビューを構築しようとしています。そのために、ビューポートを表す親 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/ (赤い枠線はコンテンツのサイズを示しています)。