在一行中显示包装的div

Question

我正在尝试构建一个图像滑块（没有问题！）：

<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的宽度（即300px）时，其余图像将移动到另一行，即代替

pic1 pic2 pic3 pic4

我得到了

pic1 pic2
pic3 pic4

我该如何解决这个问题。

Answer 1

将#inside div的大小增加到图片大小，然后使用overflow:hidden div中的#wrapper隐藏所有额外空格。

所以它会是这样的：

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

Answer 2

我不明白 - 如果你的图像内部更大，300px包装器有什么意义？除非你绝对定位它们，否则如果它们太宽，它们当然会包裹起来。