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 ;.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效