DIV水平滚动，内部有许多小DIV（无文字）

一尘不染

DIV水平滚动，内部有许多小DIV（无文字）

css

目的

我有一个固定高度和宽度的主DIV，因为我想让许多小型DIV自由浮动。我的小型DIV超出了主DIV的容量。然后，默认情况下，似乎是小DIV 在主DIV之外消失
了。我希望它们反而消失在右边。

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

背景

我white-space:nowrap按照

如果我的主DIV中只有文本或图像，它会非常完美。

题

但是，当主DIV仅包含小型DIV时，该怎么办？

阅读 239

2020-05-16

共1个答案

一尘不染

像这样，将较小的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>

2020-05-16