Comment faire pour que la largeur div d'un enfant corresponde à son contenu avec la largeur div de parent 100% overflow-x: auto dans IE & FF

Question

J'ai une galerie d'art pleine de vignettes. Je voulais ajouter une barre de défilement horizontale personnalisée pour que les utilisateurs puissent faire défiler une seule ligne de vignettes. Il y a différentes quantités de vignettes dans chaque galerie. J'ai essayé d'utiliser la propriété CSS "width: -moz-max-content;" Cependant, cela ne fonctionne que dans Firefox et non IE6,7,8, Chrome ou Safari.

Voici un exemple ->http://theo.mypreview.co.uk/ashmolean-museum

largeur de Le site est fixé à 90% des téléspectateurs taille du navigateur.

div class = "contenu" - le titulaire
div id = "messages" - est l'endroit où toutes les vignettes sont générées

sidenote - Je viens d'installer jscroll

Answer 1

Il y a une très bonne jquery galeries disponibles qui feront ce que vous avez besoin. Juste des galeries de google jquery. ou http://www.1stwebdesigner.com/design/fresh-jquery-image-gallery-display-solutions/. J'espère que cela aide

Answer 2

Vous pouvez utiliser certaines des propriétés CSS3 spécifiques du navigateur:

#hero { 
    width: -moz-max-content; /* Firefox */ 
    width: intrinsic; /* Safari, Chrome */ 
} 

Pour plus d'informations sur ces propriétés voir ce MDN doc:

https://developer.mozilla.org/en/CSS/max-width

Comme vous le remarquerez, ceux-ci ne supportent pas IE9/IE8/IE7 et certainement pas IE6. Cependant, j'imagine qu'une solution autour de ceci serait d'utiliser JS pour calculer la largeur et ajouter une largeur à l'élément ayant besoin de cette fonctionnalité.