如何让浮动DIV在固定宽度DIV内水平继续？ [英] How to get Floating DIVs inside fixed-width DIV to continue horizontally?

问题描述

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

I have a container DIV with a fixed height and width (275x1000px). In this DIV I want to put multiple floating DIVs each with a width of 300px, and have a horizontal (x-axis) scrollbar appear to allow the user to scroll left and right to view everything.

这是我到目前为止的CSS：

This is my CSS so far:

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，那么垂直滚动条出现，我可以向下滚动。

The problem is that the floating DIVs will not continue past the width of the container. After putting three of the floating DIV's they will continue on beneath. If I change overflow-y to auto, then the vertical scrollbar appears and I can scroll down.

如何更改这个值，使浮动DIV继续运行彼此？

How can I change this to make the floating DIVs continue on without going beneath each other?

推荐答案

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>。

The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.

这篇关于如何让浮动DIV在固定宽度DIV内水平继续？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！