Faites en sorte que le contenu défile horizontalement dans un div

J’ai une division dans laquelle je veux montrer des images et en cliquant dessus, ouvrez-les dans une lightbox. Je les ai flottés à gauche et les ai affichés en ligne. définir overflow-x pour faire défiler mais il met toujours les images ci-dessous une fois que l’espace de ligne n’est pas suffisant. Je veux les faire être en ligne et afficher un défilement horizontal si nécessaire.

REMARQUE: Je ne peux pas modifier la structure des images à l’intérieur. Ce doit être une img à l’intérieur d’une ancre. Ma lightbox l’exige comme ça.

HTML:

CSS:

 #myWorkContent{ width:530px; height:210px; border: 13px solid #bed5cd; overflow-x: scroll; overflow-y: hidden; } #myWorkContent a { display: inline; float:left }

Je sais que c’est très simple mais je ne peux pas le faire. Je ne sais pas ce qui ne va pas.

C’est peut-être quelque chose comme ceci en HTML:

Avec cette feuille de style:

 .container-outer { overflow: scroll; width: 500px; height: 210px; } .container-inner { width: 10000px; }

Vous pouvez même créer un script intelligent pour calculer la largeur du conteneur interne, comme celui-ci:

 $(document).ready(function() { var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length; $(".container-inner").css("width", container_width); });

si vous supprimez le float: left de a et ajoutez white-space: nowrap à la div externe

 #myWorkContent{ width:530px; height:210px; border: 13px solid #bed5cd; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } #myWorkContent a { display: inline; }

Cela devrait fonctionner pour n’importe quelle taille ou quantité d’images.

ou même:

 #myWorkContent a { display: inline-block; vertical-align: middle; }

qui alignerait également verticalement des images de différentes hauteurs si nécessaire

code de test

Le problème est que vos img s vont toujours tomber à la ligne suivante à cause du div contenant.

Pour contourner ce problème, vous devez placer les img dans leur propre div avec une width suffisante pour tous les contenir. Ensuite, vous pouvez utiliser vos styles tels quels.

Donc, quand je mets les img s à 120px chacun et les place dans un

 div#insideDiv{ width:800px; }

tout fonctionne.

Ajustez la largeur si nécessaire.

Voir http://jsfiddle.net/jasongennaro/8YfRe/

Identique à ce que clairesuzy a répondu, sauf que vous pouvez obtenir un résultat similaire en ajoutant display: flex au lieu de white-space: nowrap . Utiliser display: flex réduira les “marges” img au cas où ce comportement serait préférable.

La réponse de @ marcio-junior ( https://stackoverflow.com/a/6497462/4038790 ) fonctionne parfaitement, mais je voulais expliquer à ceux qui ne comprennent pas pourquoi cela fonctionne:

@ a7omiton Avec la réponse de @ psyren89 à votre question

Considérez le div externe comme un écran de film et la div interne comme le paramètre dans lequel les personnages se déplacent. Si vous visualisiez la configuration en personne, c’est-à-dire sans écran, vous seriez en mesure de voir tous les personnages en même temps en supposant que vos yeux ont un champ de vision suffisamment large. Cela signifierait que le réglage ne devrait pas faire défiler (déplacer de gauche à droite) pour que vous puissiez en voir plus et ainsi restr immobile.

Cependant, vous n’êtes pas au réglage en personne, vous le visualisez à partir de l’écran de votre ordinateur qui a une largeur de 500px alors que le paramètre a une largeur de 1000px. Ainsi, vous devrez faire défiler (déplacer de gauche à droite) le réglage pour voir plus de caractères à l’intérieur.

J’espère que cela aide toute personne perdue sur le principe.