css - DIV 中的水平滚动，内部有许多小 DIV(无文本)

Question

目标

我有一个固定高度和宽度的主 DIV，我希望有很多小的 DIV 可以自由 float 。我的小 DIV 多于主 DIV 所能容纳的数量。然后似乎默认情况下小 DIV 的 down 消失在主 DIV 之外。我希望它们消失在右边。

我想触发水平滚动条，但没有垂直滚动条。

背景

我按照 http://www.webmasterworld.com/forum83/8844.htm 中的描述使用 white-space: nowrap 测试了这个

如果我在主 DIV 中只有文本或图像，它就完美了。

问题

但是当主 DIV 只包含小 DIV 时我该怎么办？

Answer 1

我已经使用 jQuery、HTML 和 CSS 完成了这项工作:

HTML

<div id="overflow">
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

#overflow{
    border: 1px solid #000;
    height: 220px;
    width: 220px;
    overflow-x: scroll;
    overflow-y: hidden;
}
#overflow .container div{
    border: 1px solid #CCC;
    float: left;
    width: 200px;
    height: 200px;
}

jQuery

$(function(){
    var width = 0;
    $('#overflow .container div').each(function() {
        width += $(this).outerWidth( true );
    });
    $('#overflow .container').css('width', width + "px");
        alert(width);
    });
});

基本上，div 不能在 CSS 中使用流体宽度，因为宽度是从父 div 固有地应用的。

使用一些 jQuery 代码，您可以轻松地将宽度附加到包含的 div。

Here is the fiddle with the final code.

或

在容器 div 上使用固定宽度，即 #overflow .container { width : 1880px }