使分裂并排进入CSS

Question

我的设计中有两个问题。

1. 屏幕宽度低于2-3行后的div取决于拇指数量。 （我希望它们在一条直线上并超出屏幕宽度） 我试过显示内联，块，内联块，没有运气

2. 我无法隐藏内容div之外的div。我已经把溢出：隐藏了，但仍然有问题。

主要问题是，我需要拇指指针的总宽度（#thumb_hs）来设置draggable的限制。因此，当我拖动时，它只拖动直到第一行div。

编辑：第一个问题解决了。感谢David Thomas。 通过更改javascript参数解决了另一个问题。

Answer 1

要强制不进行换行，您可以在父元素上使用white-space: nowrap;，但这需要将子级上的display设置为inline或inline-block（使用float will cause the elements to wrap）：

#container {
    white-space: nowrap;
    /* other stuff */
}

.contained {
    display: inline-block;
}

JS Fiddle demo

将overflow-x: scroll;添加到#container元素可以让您显然滚动到其他元素（如果您想要优雅降级）：JS Fiddle demo。