html - 画像をインラインにする方法と改行する方法は?

Question

http://jsfiddle.net/KuFbH/

次の行に分割することなく、これらの 4 つの画像をすべて 1 行に表示しようとしています。ページをズームアウトすると、希望どおりに表示されますが、何らかの理由で機能しません。私に何ができる？

横にスクロールして表示できるようにしたいです。

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%;
}

Jクエリ

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

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

Answer 1

これを試して：

.Wrapper {white-space:nowrap;}

ここでのデモ: http://jsfiddle.net/FEb9L/

Answer 2

インライン要素のデフォルトの動作であるため、画像が折り返されます。それらをラップしたくない場合は、親要素で適切な動作を指定します。

.scrollArea {
  white-space: nowrap;
}

Answer 3

display: inline-block;css スタイルシートで画像を設定します。