显示在一行

我试图建立一个图像滑块包裹格（与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

回答

相关问题