css - 使用固定宽度和溢出 : hidden 的父级自动调整子 div 的宽度

Question

我的问题有点难以解释。我想要一个 div 来拉伸(stretch)，这样他所有漂浮的 child 都保持在同一条线上。问题是容器的父级有一个固定的宽度，他的溢出是隐藏的。

想法是 div.container 拉伸(stretch)(在我的例子中应该是 1100px)所以 div.thumb 保持在同一条线上。

这是 JSFiddle 上的例子:http://jsfiddle.net/TdHYg/3/

<div class ="viewport">
<div class="container">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
</div>

.viewport {
border:1px black solid;
overflow:hidden;
width:400px;   
}

.container {
/* width:1100px*/
}

.thumb{
background-color:lightgray;
margin:5px;
width:100px;   
height:100px;    
float:left;
}

Answer 1

在 thumbs 周围添加另一个容器:

http://jsfiddle.net/TdHYg/4/