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

前端之家收集整理的这篇文章主要介绍了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 ;.

猜你在找的CSS相关文章