Html 溢出-x：滚动不'；好像不行

我不明白为什么这不起作用。我试图在

div.queue-wrapper

中实现水平滚动，因此

div.queue-month

如果没有足够的空间（这是他们目前正在做的事情），就不会一个接一个地掉下来

HTML

        <div class="queue-container">
            <div class="queue-wrapper clearfix">
                <div class="queue-month">
                    1
                </div>
                <div class="queue-month">
                    2
                </div>
                <div class="queue-month">
                    3
                </div>
            </div>
        </div> <!-- .queue-container -->

范例

---

我使用的是bootstrap 3，但由于它在fiddle中不起作用，我认为它与问题无关。

您可以使用空白来表示nowrap，并使用内联块显示而不是浮动：

.queue容器{
高度：260px；
宽度：100%；
背景颜色：灰色；
盒影：插入0.2px2pRGBA（0,0,0,0.5）；
}
.队列包装器{
溢出-x:自动；/*已从滚动更改*/
背景：黄色；
宽度：100%；
空白：nowrap；/*使用nowrap*/
}
.排队月份{
宽度：385px；
显示：内联块；/*而不是浮点：左*/
背景颜色：橙色；
}

1.
2.
3.

您可以使用空白作为nowrap，并使用内联块显示而不是浮动：

.queue容器{
高度：260px；
宽度：100%；
背景颜色：灰色；
盒影：插入0.2px2pRGBA（0,0,0,0.5）；
}
.队列包装器{
溢出-x:自动；/*已从滚动更改*/
背景：黄色；
宽度：100%；
空白：nowrap；/*使用nowrap*/
}
.排队月份{
宽度：385px；
显示：内联块；/*而不是浮点：左*/
背景颜色：橙色；
}

1.
2.
3.

如果您不想滚动，请尝试以下操作：

CSS

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
    overflow-x: scroll;
    background: yellow;
    width: 100%;
}

.queue-month {
    width: 385px;
    float: left;
    background-color: orange;
}

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
  background: yellow;
  width: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.queue-month {
  width: 385px;
  background-color: orange;
  display: inline-table;
}

---

如果您不想滚动，请尝试以下操作：

CSS

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
    overflow-x: scroll;
    background: yellow;
    width: 100%;
}

.queue-month {
    width: 385px;
    float: left;
    background-color: orange;
}

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
  background: yellow;
  width: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.queue-month {
  width: 385px;
  background-color: orange;
  display: inline-table;
}

---

---

没有长文本，因此它会滚动。如果容器的空间超过了它的空间，那么只有它会滚动。我正在尝试找出如何使它滚动，如果。队列月div没有足够的空间，无法一个接一个地水平放置。就目前而言，它们只是一个接一个地下降。我刚刚理解了你的问题。等等。没有长文本，所以它会滚动。如果容器的空间超过了它的空间，那么它只会滚动。我正在尝试弄清楚如何使它滚动，如果。队列月div没有足够的空间，无法一个接一个地水平放置。因为目前它们只是一个接一个地下降。我刚刚理解了你的问题。等等，没什么好担心的scroll@MirkoBrombin那把小提琴没有变化。但是它不应该滚动吗？因为.queue month div具有固定的宽度，该宽度会溢出其中一个.queue包装器？对不起，错误，请检查我的答案。您可以使用css属性overflow-x：没有什么可更改的scroll@MirkoBrombin那把小提琴没有变化。但是它不应该滚动吗？因为.queue month div具有固定宽度，溢出了其中一个.queue包装器？抱歉，错误，请检查我的答案。您可以使用css属性overflow-x：