Предотвращение обертывания изображений, но использование прокрутки

Question

В приведенном ниже коде есть 3 изображения. Я хочу ограничить ширину контейнера до 300 пикселей. Когда общее количество изображений превышает эту ширину, я хочу, чтобы пользователь прокручивал горизонтально, чтобы обновить изображения. Однако мой код вызывает обертывание изображений. Вот скрипку:

http://jsfiddle.net/AndroidDev/Asu7V/10/

<div style="width:300px; overflow-x: scroll"> 
    <div style=""> 
     <div class="x"> 
      <img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" /> 
     </div> 
     <div class="x"> 
      <img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" /> 
      <img src="http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" /> 
     </div> 
     <div class="x"> 
      <img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" /> 
     </div> 
    </div> 
</div> 

Answer 1

white-space: nowrap; Используйте на родительский элемент, который заставит элементы не завернуть, если они не дотягивают родителей width. И я изменил overflow-x: scroll; на overflow-x: auto;, чтобы он не показывал ненужную полосу прокрутки, если изображения не превышают родительский элемент. Просто твик для лучшего пользовательского интерфейса, если нет, то вы можете использовать overflow-x: scroll; также ..

<div style="width:300px; overflow-x: auto; white-space: nowrap;"> 

Demo

Кроме того, не следует использовать встроенные стили, используйте class и id вместо этого.