html - 如何使图像内联与换行？

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

尝试这个：

.Wrapper {white-space:nowrap;}

在这里演示：http: //jsfiddle.net/FEb9L/

Answer 2

您的图像会换行，因为这是内联元素的默认行为。如果您不希望它们换行，请在父元素上指定适当的行为：

.scrollArea {
  white-space: nowrap;
}

Answer 3

将您的图像设置为display: inline-block;您的 css 样式表。