La largeur de l'élément avec 'white-space: nowrap' ne s'ajuste pas au contenu enfant

Je suis en train de créer un défilement horizontal d'un volet avec (carrelage) image d'arrière-plan, à l'aide de overflow-x: scroll & white-space: nowrap. Le volet s'étend sur un nombre arbitraire d'éléments.

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>

violon démo

Je veux l'arrière-plan la tuile automatiquement la durée de la totalité de la largeur de la fenêtre, y compris l'ensemble de ses éléments. Actuellement, il ne se remplit à la largeur du cadre. Le coupable semble être le volet de la largeur de la propriété - il n'a pas d'ajuster à la largeur totale du volet contenu.

L'Ofc, il fonctionne en ajustant la largeur de la propriété manuellement, mais j'en ai besoin pour ajuster dynamiquement.

Comment puis-je obtenir le volet de l'image de fond pour remplir le volet de la totalité de la largeur? Est-il une autre façon d'obtenir le même résultat?

source d'informationauteur coprolit

  1. 13

    Ajoutez cette ligne à .pane

    display: inline-block;
  2. 0

    Vous pouvez définir background-image dans l'image, qui est l'ensemble de votre panneau de

    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;
}