11

客观的

我有一个固定高度和宽度的主 DIV，我希望有很多小 DIV 可以自由浮动。我有比主 DIV 更多的小 DIV。然后似乎默认情况下，小 DIV在主 DIV 之外消失。我希望它们消失在右侧。

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

背景

我按照http://www.webmasterworld.com/forum83/8844.htmwhite-space: nowrap中的描述对此进行了测试

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

问题

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

4

2 回答 2

17

我已经使用 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。

这是最终代码的小提琴。

或者

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

于 2011-06-21T20:36:32.067 回答
13

将较小的 div 包裹在宽度比主 div 更大的第三个 div 中，就像这样。假设我正确理解了您的问题，则不需要 jquery。

<html>
    <head>
        <style type="text/css">       
            .div_1
            {

                height: 350px;
                width: 350px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_3
            {
                float: left;
                height: 350px;
                width: 500px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_2
            {
                height: 100px;
                width: 100px;
                border: 1px solid #A2A2A2;
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="div_1">
            <div class="div_3">
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
            </div>
        </div>
    </body>
</html>
于 2011-06-21T21:07:08.740 回答