web-dev-qa-db-fra.com

Faire défiler le contenu horizontalement à l'intérieur d'un div

J'ai une division dans laquelle je veux montrer des images et les ouvrir dans une boîte à lumière. Je les ai laissés flottants et les ai affichés en ligne. définissez overflow-x pour faire défiler l'écran, mais place toujours les images en dessous une fois que l'espace des lignes n'est plus suffisant Je veux les amener à être en ligne et à afficher un défilement horizontal en cas de besoin.

NOTE: Je ne peux pas changer la structure des images à l'intérieur. Ce doit être un img à l'intérieur d'une ancre. Ma visionneuse le requiert comme ça.

HTML:

<div id="myWorkContent">
    <a href="assets/work/1.jpg"><img src="assets/work/1.jpg" height="190" /></a>
    <a href="assets/work/2.jpg"><img src="assets/work/2.jpg" height="190" /></a>
    <a href="assets/work/3.jpg"><img src="assets/work/3.jpg" height="190" /></a>
    <a href="assets/work/4.jpg"><img src="assets/work/4.jpg" height="190" /></a>
    <a href="assets/work/5.jpg"><img src="assets/work/5.jpg" height="190" /></a>
    <a href="assets/work/6.jpg"><img src="assets/work/6.jpg" height="190" /></a>
</div><!-- end myWorkContent -->

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 basique mais je ne peux tout simplement pas le faire. Je ne sais pas ce qui ne va pas.

htmlcss
52
Aayush

Cela peut être quelque chose comme ça en HTML:

<div class="container-outer">
   <div class="container-inner">
      <!-- Your images over here -->
   </div>
</div>

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);
});
77
Daniel O'Hara

si vous supprimez le float: left du a et ajoutez white-space: nowrap au div

#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 permettrait également d'aligner verticalement des images de différentes hauteurs si nécessaire

code de test

74
clairesuzy

Le problème est que votre imgs passera toujours à la ligne suivante à cause de la valeur contenant div. 

Pour résoudre ce problème, vous devez placer les imgs dans leur propre div avec une width assez large pour les contenir tous. Ensuite, vous pouvez utiliser vos styles tels quels.

Donc, quand je règle imgs sur 120px et que je les place dans un 

div#insideDiv{
    width:800px;
}

tout fonctionne.

Ajustez la largeur si nécessaire.

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

1
Jason Gennaro

Identique à la réponse claire, 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ù le comportement serait préféré.

1
papiro

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 Accompagné de la réponse de @ psyren89 à votre question 

Pensez à la div extérieure en tant qu'écran de film et à la div intérieure au paramètre dans lequel les personnages se déplacent. Si vous visualisiez le paramètre en personne, c'est-à-dire sans écran autour de celui-ci, vous seriez en mesure de voir tous les personnages en même temps, à condition que vos yeux aient un champ de vision suffisamment grand. Cela signifierait que le paramètre n'aurait pas à faire défiler (déplacer de gauche à droite) pour que vous puissiez en voir plus et ainsi il resterait 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 réglage a une largeur de 1000px. Ainsi, vous devrez faire défiler (déplacer de gauche à droite) le paramètre afin de voir plus de caractères à l'intérieur de celui-ci.

J'espère que cela aide tous ceux qui ont perdu le principe. 

0
lwdthe1