用固定寬度和溢出的父級自動寬度子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/的東西？