0

サイトのフッターに、10 個の div が連続し、1 つのコンテナーに配置されたサンプルがあります。このサイトはレスポンシブで、スマートフォンでも動作します。

スマートフォンで横スクロールビューを作りたいのですが、オーバーフローした div (たとえば 4,5,6,7,8,9,10) をビューポートの外側に一列に配置する必要があります (スライドさせます)の）。この jsFiddleの css を使用すると、行に配置されていない div は、同じ行ではなく、ビューポートの下に配置されます。それらを同じ列に配置するにはどうすればよいですか？

基本的に、ビューポートに n 個の正方形だけが必要で、残りはスライドさせます。

PS私はこれを手動でやろうとしています.jQueryにいくつかのスクロールビューアプラグインがありますか? (jQuery モバイルではありません)

4

2 に答える 2

1

これはあなたが意味するものですか？

HTML

    <body>
        Content
        <div class="footer">
            <div class="footer_contents">
                    <div class="square selected">1</div>
                    <div class="square">2</div>
                    <div class="square">3</div>
                    <div class="square">4</div>
                    <div class="square">5</div>
                    <div class="square">6</div>
                    <div class="square">7</div>
                    <div class="square">8</div>
                    <div class="square">9</div>
                    <div class="square">10</div>
            </div>
        </div>
    </body>

CSS

.footer {
    height:50px; 
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: scroll;
    overflow-y: hidden;
}   

.footer_contents {
    height: 50px;
    width: 1000px;
    margin: auto;
}
于 2012-07-24T17:13:44.500 に答える
1

別のラッピング div が必要かもしれないと思います。私が見たほとんどのスライダーにoverflow: hiddenは、移動する非常に広い div (少なくともすべてのコンテンツを保持するのに十分な幅) を持つ div があります。プラグインに関しては、jQuery Toolsを数回使用しました

于 2012-07-25T16:00:56.550 に答える