用固定宽度和溢出的父级自动宽度子div：隐藏

Question

我的问题有点难以解释。我想要一个div伸展，让他所有漂浮的孩子都保持在同一条线上。问题是容器的父级具有固定的宽度，并且他的溢出隐藏。

这个想法是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

请问http://jsfiddle.net/f2WeB/是否完全符合您的要求？希望如此！显示：从Opera 2开始，从IE8开始，从Firefox 3开始，Safari 2支持inline-block。

Answer 2

添加thumbs围绕另一个容器：

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

Answer 3

您可以通过周围保存Xander的DIV containi ng漂浮浮标：http://jsfiddle.net/TdHYg/5/。这会让你“浮动几乎所有东西”。但还有其他方法，如清除：http://jsfiddle.net/TdHYg/7/。

或者您想要类似http://jsfiddle.net/TdHYg/6/的东西？