javascript - div要素を並べて表示する

Question

デザインに2つの問題があります。

1. div親要素の幅を超える要素は、次の行に折り返されます。（一直線に並べたい）インライン、ブロック、インラインブロックを表示してみましたが、運が悪かったです

2. コンテンツdivの外側のdivを非表示にすることはできません。私はすでにオーバーフローを入れました：隠されていますが、それでも何かが間違っています。

主な問題は、ドラッグ可能な制限を設定するためにサムホルダーの全幅（#thumb_hs）が必要なことです。したがって、ドラッグすると、最初の行がdivになるまでドラッグされます。

編集：最初の問題は解決されました。デビッドトーマスに感謝します。もう1つの問題は、javascriptパラメーターを変更することで解決されました。

Answer 1

折り返しを強制しないようにするwhite-space: nowrap;には、親要素でを使用できますが、これには、子でまたは（を使用すると要素が折り返される）のdisplayいずれかに設定されている必要があります。inlineinline-blockfloat

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

.contained {
    display: inline-block;
}

JSフィドルデモ。

要素に追加overflow-x: scroll;する#containerと、明らかに、他の要素にスクロールできます（適切な劣化が必要な場合）：JSFiddleデモ。