web-dev-qa-db-ja.com

'white-space：nowrap'を含む要素の幅が子コンテンツに適合しない

overflow-x：scroll＆を使用して、（タイル張りの）背景画像を持つ水平スクロールペインを作成しようとしています空白：nowrap。ペインは、任意の数の要素にまたがっています。

CSS：

.frame {
   overflow-x: scroll;
}

.pane {
   background-image: url(free-tile-floor-texture.jpg);
   background-repeat: repeat;
   white-space: nowrap;
}

.item {
   display: inline-block;
   width: 150px;
   height: 50px;
   background-color: grey;
}

HTML：

<div class="frame">
   <div class="pane">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</div>

フィドルデモ

背景タイルを、すべての項目要素を含むペインの幅全体に自動的に広げたいと思います。現在は、フレームの幅までしか塗りつぶされません。犯人は、ペインの幅のプロパティのようです-ペインのコンテンツの全体の幅に合わせません。

多くの場合、手動でwidthプロパティを調整することで機能しますが、動的に調整する必要があります。

ペインの背景画像を取得してペインの全幅にするにはどうすればよいですか？同じ結果を達成する別の方法はありますか？

cssoverflowbackground-imagepanelnowrap
17
coprolit

この行を.paneに追加します

display: inline-block;
18
neja

パネル全体であるフレームに背景画像を定義できます

http://jsfiddle.net/erenyener/9u29k/6/

 .frame {
     overflow-x: scroll;
     background-image: url(http://store.got3d.com/products/30-tile-floor-textures/thumbnails/free-tile-floor-texture.jpg);
     background-repeat: repeat;
}
0
Mehmet Eren Yener