0

我有一个连续 10 个 div 的示例，放置在一个容器中，位于站点的页脚中。该站点将是响应式站点，它也可以在智能手机上运行。

在智能手机上，我想制作一个水平滚动视图，但我需要将溢出的 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。我见过的大多数滑块都会有一个 div，overflow: hidden里面是一个非常宽的 div（至少足够宽以容纳所有内容），可以移动。至于插件，我用过几次jQuery Tools

于 2012-07-25T16:00:56.550 回答