我有一个容器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> ;.