使用溢出隱藏，顯示的時候，孩子是容器

Question

過大對於視覺的部分元素，請訪問此琴：

http://jsfiddle.net/rR8Hh/

我想達到的效果是，在這個例子中，第五個div.child的左側應該是可見的，就在第四個子div的右側。

取而代之的是換行等沒有這種元件可以看出。使用white-space: nowrap不起作用。

HTML：

<div id="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    <div class="child">3</div> 
    <div class="child">4</div> 
    <div class="child">5</div> 
    <div class="child">6</div> 
</div> 

CSS：

#parent{ 
    height:90px; 
    width:400px; 
    overflow:hidden; 
    border:3px solid black; 
    white-space:nowrap; 
} 
.child{ 
    float:left; 
    height:80px; 
    width:80px; 
    margin:5px; 
    border:1px solid red; 
} 

我知道我已經實現了我的預期效果，但我似乎無法弄清楚如何我做到了。

這樣的

Answer 1

稍微粗糙，但工作方式是寬度大包裹孩子的div在另一個div中。例如：

CSS：

.wrap{ 
    width:9999px; 
} 

HTML：

<div id="parent"> 
    <div class="wrap"> 
     <div class="child">1</div> 
     <!-- etc --> 
    </div> 
</div> 

我只設置寬度爲9999，因爲我不知道你有多少子元素都有。寬度可以在服務器輸出頁面時計算和設置，或者您可以使用一小段javascript（wrapper width = number of child elements * child outer width）。

這裏工作：http://jsfiddle.net/rR8Hh/4/