只有帶CSS的水平滾動

我正在處理的圖像庫中，我想要一個水平滾動（即縮略圖被列出水平），並且包含它們的區域應該有一個固定的滾動寬度，如果有很多適合該地區。只有帶CSS的水平滾動

到目前爲止，下面是CSS代碼，但它看起來並不像你在代碼下面的快照中看到的那樣工作。我可以寫什麼來完成我想要的？

在此先感謝！

#thumbnailArea { 
    padding: 5px; 
    width: 600px; 
    height: 90px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    border: 1px solid black; 
}

enter image description here

縮略圖區域（與ASP.net web表單生成）的HTML代碼如下：因爲容器適合於寬您提供這

<div id="thumbnailArea"> 

      <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a> 

      <a id="ImageRepeater_ImageHyperLink_1" class="thumbnails" href="default.aspx?name=Autumn.jpg"><img id="ImageRepeater_Image1_1" class="thumbnail" src="Images/Thumbnails/Autumn.jpg" /></a> 

and so on... 

</div>

來源

2012-02-22 holyredbeard

thumnailArea中的html看起來像什麼？ – 2012-02-22 16:37:58

該代碼被添加... – holyredbeard 2012-02-22 16:42:38

我發佈了一個答案，那應該可以解決問題 – 2012-02-22 16:51:47

雖然您已關閉垂直滾動，所述#thumbnailArea寬度不受影響（並且作爲結果，強制包裝）。這應該做的伎倆：

#thumbnailArea { 
white-space:nowrap; 
}

來源

2012-02-22 16:46:29 0b10011

。爲了達到所需的效果，您應該使用兩個嵌套div：外部具有給定寬度，內部具有圖像。

實施例：http://jsfiddle.net/jTJFa/1/

HTML：

<div class="box"> 
    <div class="area"> 
     <img/> 
     ... 
    </div> 
</div>

定製CSS：

.box { 
    width: 500px; 
    overflow-x: scroll; 
} 

.area { 
    width: 1000px; 
}

來源

2012-02-22 16:46:02

我只是在忙着打字:) – Evert 2012-02-22 16:47:35

提示：首先發表答案，然後寫一個例子;） – 2012-02-22 16:51:55

對於這個工作，你需要的縮略圖格內一個div的寬度，使所有照片裝進：

<div id="thumbnailArea"> 
    <div style="width: 1000px;"> 
     <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a> 

     <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a> 

     and so on... 
    </div> 
</div>

這應該做的伎倆，改變寬度，以便在末尾沒有大量空白空間

來源

2012-02-22 16:51:28

只有帶CSS的水平滾動

回答

相關問題