顯示在一行

我試圖建立一個圖像滑塊包裹格（與JS沒有問題！）：顯示在一行

<div id="wrapper"> 
    <div id="inside"> 
     <img src="pic1"> 
     <img src="pic2"> 
     <img src="pic3"> 
     <img src="pic4"> 
    </div> 
</div>

與以下樣式：

#wrapper{position:relative; width:300px; overflow:hidden;} 
#inside{position:relative;} 
#inside img{width:140px;}

時的寬度圖像（pic1,2,3,4）比#wrapper指定的寬度大（即300像素），圖像的其餘部分被移動到另一條線路，即，代替

pic1 pic2 pic3 pic4

我得到

pic1 pic2 
pic3 pic4

我該如何解決這個問題。

來源

2012-01-06 user1073201

將#inside div的大小增加爲圖像的大小，只需在#wrapper div中隱藏overflow:hidden的所有額外空間即可。

因此，這將是這樣的：

#wrapper{position:relative; width:300px; overflow:hidden; } 
#inside{position:relative; width:500px; }

來源

2012-01-06 13:53:48

我以前試過這個，沒有結果 – user1073201 2012-01-06 13:56:56

@ user1073201查看這個demo，[jsFiddle]（http://jsfiddle.net/andresilich/zFdmB/）如果你增加'＃wrapper' div的大小，你應該會看到更多圖像出現。它的工作原理：D – 2012-01-06 14:00:56

技巧是添加行#inside img {width：100px;}（我另外添加）。不過，感謝您的幫助。 – user1073201 2012-01-06 14:02:28

我不明白 - 如果您的圖像內部較大，300px包裝的重點是什麼？除非你絕對定位它們，否則如果它們太寬，它們當然會打包。

來源

2012-01-06 13:51:23 Mike

可以說，每一個圖像是150像素，和包裝是320像素。我想要的是圖像符合要求，而不是兩行。 – user1073201 2012-01-06 13:54:49

回答

相關問題