溢出x不工作

Question

我想創建一個包含圖像的水平滾動div，但不知道爲什麼下面的代碼不工作。

此外，div中的圖像正在垂直顯示而不是horizo​​natlly。 人PLE可以幫助我瞭解這裏

<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> 

下面的問題是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

因爲<img>顯示爲display: inline;，你應該阻止他們打破行：使用

：

div { 
    white-space:nowrap; 
} 

做到這一點

演示：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/