Affichage des images horizontalement dans une boîte fixe avec débordement horizontal

Question

J'ai une div avec une hauteur de 500px et une largeur de 200px. A l'intérieur, il y a un tas d'images qui flottent à gauche et toutes les 180px de largeur et 500px de hauteur. Avec 10px rembourrage à gauche et à droite, cela signifie que la div affichera une seule image sur pageload.

Je voudrais que ce div fasse défiler horizontalement, le défilement vertical devrait être caché. Parce que j'ai défini une largeur fixe sur le div, le flotteur ne semble pas mettre les images les unes à côté des autres mais toujours les unes sous les autres.

Comment puis-je forcer l'affichage des images l'une à côté de l'autre? Comment puis-je réaliser un défilement horizontal, le support css3 est-il nécessaire?

Answer 1

Essayez quelque chose comme ça

#outer { 
    width:500px; 
    height:200px; 
    position:relative; 
    overflow:scroll; 
    } 

    #outer ul { 
    display:block; 
    width:1000px; 
    } 
    #outer ul li { 
    display:block; 
    float:left; 
    } 
    img{ 
    height:180px; 
    width:480px; 
    padding:10px; 

    } 

    <div id="outer"> 

     <ul> 
     <li><img href="http://lechart.dk/wp-content/uploads/2009/05/nerd.jpg" /></li> 
     <li><img href="http://mynotetakingnerd.files.wordpress.com/2009/07/note-taking-nerd.jpg" /></li> 
     </ul> 

    </div> 

Exemple de travail http://jsbin.com/ineya4/2/edit

Answer 2

Vous devez utiliser overflow-x: scroll; sur votre contenant div.

div.container {overflow-x: scroll; overflow-y:hidden; width: 100px; height:500px;} 
div.image {width:100px; height:500px; float:left;background:#890;} 

<div class="container"> 
    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 
</div>