css – 如何获取浮动DIV在固定宽度DIV内水平继续？

我有一个容器DIV具有固定的高度和宽度(275x1000px)。在这个DIV中，我想要放置多个浮动DIV，每个宽度为300px，并且有一个水平(x轴)滚动条，允许用户向左和向右滚动来查看所有内容。

这是我的CSS到目前为止：

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

问题是浮动DIV不会继续超过容器的宽度。在投入三个浮动DIV之后，它们将继续在下面。如果我将overflow-y更改为auto，则会出现垂直滚动条，我可以向下滚动。

如何更改这一点，使浮动DIV继续，而不在彼此下面？

解决方法

div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: Nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

这里的技巧只有在默认情况下行为正确的元素将在Internet Explorer中设置为inline-block时正常运行，因此内部容器需要< span>而不是< div&gt ;.

原文地址：https://www.jb51.cc/css/221273.html