Question

我试图将这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

在css样式表中将图片设置为display: inline-block;。

如何使图像内联vs中断到新行？

3 个答案: