水平排列div元素並進行背景滾動

我使用column-count:2在垂直div中添加元素，因此水平排列元素。我給了div一個漸變背景。我希望它隨着滾動（背景）移動。我使用的代碼是：水平排列div元素並進行背景滾動

<!DOCTYPE html> 
<style> 
.prodLarge { 
    margin-bottom:5px; 
    margin-left:5px; 
    width:200px; 
    height:200px; 
} 

#dispTiles { 
    position:absolute; 
    top:10px; 
    left:10px; 
    bottom:10px; 
    right:10px; 
    margin:10px; 
    overflow:auto; 
    -moz-column-count:2; 
    -webkit-column-count:2; 
    column-count:2; 
    padding:10px; 
    background-image:linear-gradient(to left, #141414 0%, #323232 50%, #000000 100%); 
    background-attachment:scroll; 
} 
</style> 
<div id="pagecont"> 
    <div id="dispTiles"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
    </div> 
</div>

的background-attachment:scroll似乎並不奏效，因爲我想要的。任何人都可以請協助？此外，即使我用repeat-x使用背景PNG圖像，該解決方案是否也能正常工作？是否有更好的方式來安排div元素水平比設置column:2？

來源

2013-03-28 Ajay Raghav

爲了使水平滾動效果，我會做這樣的事情：

這是在行動：http://jsfiddle.net/ySHcL/

基於把你原來的CSS

.prodLarge { 
    margin-bottom:5px; 
    margin-left:5px; 
    width:100px; 
    height:100px; 
} 
#dispTilesWrapper { 
    position:absolute; 
    top:10px; 
    left:10px; 
    bottom:10px; 
    right:50px; 
    margin:10px; 
    overflow:auto; 
} 
#dispTiles { 
    height: 250px; 
    white-space:nowrap; 
    padding:10px; 
    background: repeating-linear-gradient(to left, #000000 0%, #141414 10%, #555555 20%, #000000 25%); 
    /* background: url('some_path_to_an_image') repeat-x; */ 
    display:table; 
}

HTML與包裝元件

<div id="pagecont"> 
    <div id="dispTilesWrapper"> 
     <div id="dispTiles"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     <img class="prodLarge" src="http://microsoft.com/favicon.ico"> 
     </div> 
    </div> 
</div>

如您所見，我在#dispTiles周圍添加了一個包裝，以便您可以正確滾動背景元素。順便說一句，background-attachment: scroll是默認行爲，所以你不需要指定它。不過，您通常只會在垂直滾動期間觀察它的效果。要獲得跨越內容寬度的背景，您需要添加display: table;否則，背景只會在視口的寬度上重複，而不會在內容的寬度上重複。而不是使用column-count，我只是使用white-space屬性設置爲nowrap。圖像傾向於內聯顯示，但它們默認包裝...因此，這將使它們不包裝，並給你你想要的行爲。

希望這會有所幫助。

來源

2013-04-03 03:21:35 fletch

水平排列div元素並進行背景滾動

回答

相關問題