如何爲應用程序截圖創建一個漂亮的水平滾動區域，就像iTunes上的應用程序一樣？

Question

我有一些應用截圖我想添加到我的網站，但我想，但他們在水平滾動區域就像iTunes Store應用截圖區域。

我該如何執行此操作，或者是否有人能指向正確的方向。謝謝。

Answer 1

爲CSS與此創建一個DIV：

.overflowdiv { 
    height: 310px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    width: 980px; 
} 

這將創建一個自動溢出980x310px DIV因此，如果含量大於像素的量寬它會自動添加一個滾動。

爲了防止「新線」的情況發生，我通常把它添加一個表：

<div class="overflowdiv"> 
<table> 
    <tr> 
     <td> 
      Content here 
     </td>  
     <td> 
      Content here 
     </td>  
     <td> 
      Content here 
     </td>  
     <td> 
      Content here 
     </td>  
    </tr> 
</table> 

Answer 2

<div style="width: 800px; height: 100px; overflow: auto"> 
    <div style="height: 100px"> 
     ... lots of content here ... 
    </div> 
</div> 

只要你的風格「內容」，所以水平流動，它會一次內部的div增長寬度大於800像素，並創建一個水平滾動條「溢出」的外層div。

Answer 3

我最近建立了一個很好的無限畫廊，你可以在行動中看到它在這裏：

Infinite gallery demo

• 自動幻燈片支持
• 停止懸停
• 簡單的HTML標記
• 窗口大小調整 - 保持中心屏幕

由於有大量的CSS，HTML，JS在這裏貼...只是「查看surce」關於當前圖像。 如果您有任何問題，我很樂意提供幫助。