CSS多个div溢出

我有一个10行的示例，在一个容器中，位于网站的页脚的示例。这个网站将是一个响应式的，它也将在智能手机上工作。CSS多个div溢出

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

基本上，我想仅仅局限于N平方在视口中，他们的休息，我将在滑入他们。

附：我试图手动执行此操作，jQuery中是否有一些滚动查看器插件？（不是jQuery Mobile）

来源

2012-07-24 DaJackal

我想你可能需要另一个包装div。我见过的大多数滑块都会有一个带有“overflow：hidden”的div，并且里面是一个非常宽的div（至少足够容纳所有内容）被移动。至于插件，我已经使用了[jQuery Tools]（http://jquerytools.org/） – MrOBrian 2012-07-24 16:53:53

@MrOBrian请将您的评论作为答案，让我将其标记为正确的答案。这非常有帮助，谢谢。 – DaJackal 2012-07-25 05:59:31

哦，很酷。我不确定这是不是你想要的，但我很高兴它有帮助。 :) – MrOBrian 2012-07-25 16:02:06

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

来源

2012-07-25 16:00:56 MrOBrian

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

来源

2012-07-24 17:13:44 ohiock

CSS多个div溢出

回答

相关问题