css - 使用溢出隐藏，当子元素对于容器来说太大时显示部分元素

Question

如需视觉效果，请访问此小提琴：

http://jsfiddle.net/rR8Hh/

我想要达到的效果是，在这个例子中，第 5 个的左侧div.child应该是可见的，就在第 4 个子 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/