Question

我正在使用column-count:2垂直添加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？

Answer 1

要制作水平滚动效果，我会做类似的事情：

这里有效：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。图像倾向于以内联方式显示，但它们默认包装...因此，这将使它们不会换行并为您提供所需的行为。

希望这有帮助。

水平排列div元素并使背景滚动

1 个答案: