CSS水平滾動

我試圖創建一個<div>與一系列的照片，只能水平滾動。CSS水平滾動

它應該看起來像這樣LINK;

但是，以上只是通過指定包含照片的<div>的寬度（因此它們不包括「自動換行」）來實現。如果我不放寬度 - 看起來像這樣; LINK

我能做些什麼來使用CSS來防止放入固定的寬度，因爲圖像可能會有所不同。

感謝

2012-03-29 Simon R

您可以使用display:inline-block與white-space:nowrap。像這樣寫：

.scrolls { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: 80px; 
    white-space:nowrap 
} 
.imageDiv img { 
    box-shadow: 1px 1px 10px #999; 
    margin: 2px; 
    max-height: 50px; 
    cursor: pointer; 
    display:inline-block; 
    *display:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
    vertical-align:top; 
}

入住這http://jsfiddle.net/YbrX3/

來源

2012-03-29 13:01:19 sandeep

這工作真的很好 - 感謝 – 2012-03-29 13:12:40

@sandeep plz幫助我出去，我用烏爾CSS這是的jsfiddle並通過該按鈕是在頁腳現在怎麼存儲AJAX呼喚動態假設一些數據R卡明我可以滾動該按鈕而不是窗口頁面只頁腳 – 2013-07-18 07:32:32

如何還通過抓取圖像並拖動左/右來支持滾動？ – 2015-11-10 17:03:02

這裏檢查這個環節我改變顯示：inline-block的 http://cssdesk.com/gUGBH

來源

2012-03-29 13:04:06 vicky

儘管這個鏈接可能回答這個問題，但最好在這裏包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – 2014-05-26 08:09:03

使用此代碼來生成水平滾動塊內容。我從這裏得到這個http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html

<html> 
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title> 
<head> 
<style type="text/css"> 
#outer_wrapper { 
    overflow: scroll; 
    width:100%; 
} 
#outer_wrapper #inner_wrapper { 
    width:6000px; /* If you have more elements, increase the width accordingly */ 
} 
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */ 
    width: 250px; 
    height:300px; 
    float: left; 
    margin: 0 4px 0 0; 
    border:1px grey solid; 
} 
</style> 
</head> 
<body> 

<div id="outer_wrapper"> 
    <div id="inner_wrapper"> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <!-- more boxes here --> 
    </div> 
</div> 
</body> 
</html>

來源

2014-02-11 17:52:59 FrameWorker

嘗試使用表結構，它更加兼容。檢查了這一點Horizontal Scrolling using Tables

來源

2015-07-02 11:40:46 Subroto

回答

相關問題