セクション数が不明な横スクロールページを作成するにはどうすればよいですか？

Question

私は水平に配置されるべきであるいくつかの<section>を含むウェブページを持っています。すべて画面幅の85％で、両面に自動余白があります。問題は何らかの理由でセクションがfloat:leftを無視しているように見えることです。 同じCSSが多くのページで使用されるため、本文に固定幅を設定したくない場合もあります。これができる方法はありますか？

Here's a jsbin of the code。私もdisplay:boxでこれを試しました。

Answer 1

JSを使用してコンテナのサイズを変更することができます。ここでは簡単な例です：

<div id="container"> 
    <div class="section"></div> 
    <div class="section"></div> 
    <div class="section"></div> 
    <div class="section"></div> 
</div> 

あなたは何をすべきか（さらに包装用コンテナのoverflow:hidden;zoom:1を追加）float:leftすべてのセクションです。とても簡単。しかし、それらはコンテナの幅によって制約されます（または、直接身体の子供の場合、html bodyによって制約されます）。

ここから、あなたはJSを使ってこのトリックを行います。私はjQueryを好む（しかし、人々は純粋なJSを使用していないことを批判するかもしれないので、私は手順だけを説明する）。あなたがしているのは、セクションの「外側の幅」（パディング、ボーダー、マージンを含む幅）を取得し、セクション数を掛けて直接親/コンテナに適用することですあなたの水平なアイテムを拘束しています）。

セクションの親が明示的な幅を持ち、ブラウザがそれに合うように強制することで、水平方向にスクロール可能になります。また、コンテナをセクションにも合わせてください。

これらのメソッドは現在、外側のコンテナ（900pxなど）に対して指定された幅を持ち、3つのセクション（2700px）のような内部コンテナを持つJS "スライダ"によって実行されます。これにより、外側のコンテナにoverflow:scrollが追加され、その中のすべてが「水平方向にスクロール可能」になります。