web-dev-qa-db-fra.com

La largeur de l'élément avec 'espace-blanc: nowrap' ne s'adapte pas au contenu enfant

J'essaie de créer un volet de défilement horizontal avec une image d'arrière-plan (mosaïque) à l'aide de overflow-x: scroll & white-space: nowrap . Le volet couvre 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>

démo de violon

Je souhaite que la mosaïque d'arrière-plan couvre automatiquement toute la largeur du volet, y compris tous ses éléments. Actuellement, il ne remplit que la largeur du cadre. Le coupable semble être la propriété width de la fenêtre - elle ne s’ajuste pas à la largeur totale du contenu de la fenêtre.

Ofc, cela fonctionne en ajustant la propriété width manuellement, mais j'en ai besoin pour ajuster dynamiquement.

Comment obtenir que l'image de fond du volet remplisse toute la largeur du volet? Y a-t-il un autre moyen d'obtenir le même résultat?

cssoverflowbackground-imagepanelnowrap
14
coprolit

Ajouter cette ligne à .pane

display: inline-block;
14
nejo

Vous pouvez définir une image d’arrière-plan dans un cadre représentant tout votre panneau.

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