css - 在一行中显示包裹的 div

Question

我正在尝试构建一个图像 slider (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的宽度(即300px)时，其余图片将移至另一行，即代替

pic1 pic2 pic3 pic4

我明白了

pic1 pic2
pic3 pic4

我该如何解决这个问题。

Answer 1

将 #inside div 的大小增加到图像的大小，然后在 #wrapper< 中使用 overflow:hidden 隐藏所有额外空间 分区。

所以它会是这样的:

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