Как сделать образы встраиваемыми и разбить на новую строку?

Question

http://jsfiddle.net/KuFbH/

Я пытаюсь, чтобы все эти 4 изображения отображались в одной строке, не разбираясь на следующую строку. По какой-то причине я не могу заставить его работать, хотя, если я уменьшаю масштаб страницы, это выглядит именно так, как я хочу. Что я могу сделать?

Я хочу, чтобы иметь возможность прокручивать по горизонтали, чтобы просмотреть их.

HTML

<div id="main"> 
    <div id="scroll"> 
     <div class="Wrapper"> 
      <div class="scrollArea"> 
      <img src=""> 
      <img src=""> 
      <img src=""> 
      <img src=""> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

*{ 
    font-size:100%; 
    margin: 0px; 
    padding: 0px; 
} 

body{ 
    width: 100%; 
    height: 100%; 
} 

#main{ 
    position: absolute; 
    top:100px; 
    bottom:100px; 
    left:0; 
    width: 100%; 
    background: black; 
} 

#scroll{ 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

div.Wrapper{ 
    position: relative; 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
} 

div.scrollArea{ 
    position: relative; 
    width: auto; 
    height: 100%; 
} 

.scrollArea img{ 
    max-width: 100%; 
    max-height: 100%; 
} 

Jquery

var totalWidth = 0; 
    $('.scrollArea img').each(function(){ 
     totalWidth += parseInt($(this).width(), 10); 
    }); 

    $('.scrollArea').css("width", totalWidth); 

Answer 1

Ваши изображения завернуть, потому что это поведение по умолчанию для встроенных элементов. Если вы не хотите их обертывать, укажите соответствующее поведение в исходном элементе:

.scrollArea { 
    white-space: nowrap; 
} 

Answer 2

Установите изображение в display: inline-block; в вашей таблице стилей CSS.

Answer 3

попробовать это:

.Wrapper {white-space:nowrap;} 

демо здесь: http://jsfiddle.net/FEb9L/