Question

我整天都在干涸，我无法找到解决方案。我知道这个标题有很多问题，但没有一个对我有用。

我要做的是移动设备的触摸滚动。

这是我的HTML：

    <body>
    <div id="slider_container"> 
         <div class="wrapper">
             <span>Image</span>
         </div>
    </div>
    </body>

最少2个跨度包含图像，最多10个跨度包含图像。根据用户上传的照片，将会有一些PHP代码和跨度数字会发生变化。

这是我的css代码：

body
{
      width:100%;
      overflow-x:hidden;
}

#slider_container
{
width:100%;
height:320px;
overflow: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

.wrapper
{
position:absolute;
height:320px;
}

.wrapper img
{
max-width:310px;
max-height:310px;
margin-right:5px;
float:left;
}

我想要的是在.slider_container和body之外给.wrapper自动宽度和溢出。

我希望我能说清楚。

感谢所有答案......

Answer 1

您必须使用JavaScript来测量内容，然后相应地设置包装器的宽度。像这样：

var spans = document.querySelectorAll('.wrapper span');
var width = 0;
for(var i=0; i<spans.length; i++) {
    width += spans[i].offsetWidth + 5; // + 5 for the margins
}
document.querySelector('.wrapper').style.width = width + 'px';

多个滑块的替代代码：

var wrappers = document.querySelectorAll('.wrapper');
var width;
for(var i=0; i<wrappers.length; i++) {
    var spans = wrappers[i].querySelectorAll('span');
    width = 0;
    for(var j=0; j<spans.length; j++) {
        width += spans[j].offsetWidth + 5; // + 5 for the margins
    }
    wrappers[i].style.width = width + 'px';
}

http://jsfiddle.net/s4RxE/1

如何设置div的宽度以适应内容？

1 个答案: