Débordement x ne fonctionne pas

Question

J'essaye de créer un div défilant horizontal contenant des images mais je ne sais pas pourquoi le code ci-dessous ne fonctionne pas.

De plus, les images dans le div sont affichés verticalement au lieu d'être horizontalement. Peut ple quelqu'un me aider à comprendre le problème ici

<div> 
    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> 
    <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> 
    <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> 
</div> 

est inférieure à la css:

div { 
    width:400px; 
    height:550px; 
    border:thin solid black; 
    overflow-x:scroll; 
    overflow-y:hidden; 
    position:relative; 
} 


img { 
    width:350px; 
    height:500px; 
} 

Answer 1

parce que l'affichage de <img> est display: inline;, vous devriez éviter de les briser la ligne:

utilisant :

div { 
    white-space:nowrap; 
} 

pour ce faire

demo: http://jsfiddle.net/fish_ball/vrD6E/

Answer 2

div { 
    border: thin solid #FF0000; 
    height: 550px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    position: relative; 
    width: 400px; 
    } 
img { 
    height: 500px; 
    width: 350px; 
} 
img:nth-child(2) { 
    border: 1px solid #FF0000; 
    position: relative; 
    right: -358px; 
    top: -504px; 
} 
img:last-child { 
    border: 1px solid #FF0000; 
    left: 724px; 
    position: relative; 
    top: -1000px; 
} 

http://jsfiddle.net/kisspa/99xr7/