0

div に要素を垂直に追加するために使用column-count:2しているため、それらを水平に配置します。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 に答える