Question

我有一个样本，连续10个div，位于一个容器中，位于网站的页脚中。该网站将是一个响应式网站，它也将在智能手机上运行。

在智能手机上，我想制作一个水平滚动视图，但我需要将溢出的div（例如，4,5,6,7,8,9,10）放在视口外的行中（I将它们滑入）。使用this jsFiddle中的css，行中没有位置的div放在视口下，而不是放在同一行中。 如何将它们放在同一行？

基本上，我想在视口中只有n个正方形，其余部分，我会将它们滑入。

P.S。我正在尝试手动执行此操作，jQuery中是否有一些滚动查看器插件？（不是jQuery Mobile）

Answer 1

this是什么意思？

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;
}

Answer 2

我想你可能需要另一个包装div。我见过的大多数滑块都有一个带有overflow: hidden的div，里面是一个非常宽的div（至少宽度足以容纳所有内容）被移动。至于插件，我曾多次使用jQuery Tools

CSS多个div溢出

2 个答案: