如何使固定宽度DIV中的浮动DIV能够水平继续？

一尘不染

如何使固定宽度DIV中的浮动DIV能够水平继续？

css

我有一个固定高度和宽度（275x1000px）的容器DIV。在此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继续前进而又不互相影响？

阅读 268

2020-05-16

共1个答案

一尘不染

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

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

这里的技巧只是只有默认情况下内联的元素在Internet Explorer中设置为内联块时才能正常工作，因此内部容器需要为而不是

。

2020-05-16