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

Question

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

5

我可以翻译这段内容。这是一篇关于编程的文章，作者在寻找一种适用于移动端的触摸滚动解决方案，但是他花了一整天的时间都没有找到合适的方法。虽然有很多类似的问题，但是对他来说都无法解决。下面是他提供的HTML代码。

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

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

以下是我的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;
}

我想要的是让 .wrapper 自动设置宽度，并且超出 #slider_container 和 body 的范围。

希望我表达清楚了。

感谢所有的回答...

- Hüseyin Dursun

1

这个回答解决了你的问题吗？https://dev59.com/OHRB5IYBdhLWcg3w9b99 - larssy1

我已经搜索过了，但没有起作用。请查看我对Switchfire答案的评论。 - Hüseyin Dursun

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bfavaretto · Accepted Answer

您需要使用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