Показать обернутый div в одну строку

Question

Я пытаюсь построить слайдер изображений (без проблем с 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;}

Когда ширина изображений (рис. 1,2,3,4) больше ширины #wrapper (то есть 300 пикселей), остальные изображения перемещаются на другую строку, т.е. вместо

pic1 pic2 pic3 pic4

Я получаю

pic1 pic2
pic3 pic4

Как я могу это исправить.

Answer 1

Увеличьте размер вашего #inside div до размера ваших изображений и просто скройте все это дополнительное пространство с помощью overflow:hidden в вашем #wrapper div.

Так будет примерно так:

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

Answer 2

Я не понимаю - какой смысл в обертке на 300 пикселей, если ваши изображения внутри больше?Если вы не разместите их абсолютно, они, конечно, обернутся, если они слишком широкие.