0

我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？

4

1 回答 1

0

要制作水平滚动效果，我会执行以下操作：

这是在行动：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-03T03:21:35.230 回答