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

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

html css

Html 如何设置div的宽度以适应内容？,html,css,Html,Css,我花了一整天的时间，找不到解决我想做的事情的办法。我知道这个题目有很多问题，但没有一个对我有用我正在尝试做的是一个触摸移动滚动这是我的html： <body> <div id="slider_container"> <div class="wrapper"> <span>Image</span> </div> </div>

我花了一整天的时间，找不到解决我想做的事情的办法。我知道这个题目有很多问题，但没有一个对我有用

我正在尝试做的是一个触摸移动滚动

这是我的html：

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

我想要的是给。包装自动宽度和溢出外的#滑块#容器和身体

我希望我能说清楚

感谢您的所有回答…

您必须使用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 span=document.querySelectorAll（'.wrapper span'）；
var宽度=0；
对于（var i=0；我可以回答您的问题吗？我已经搜索了它，但它不起作用。请查看我对Switchfire答案的评论。感谢您的回答。这有助于页面上的第一个滑块。对于其他滑块，它不起作用。因此，我将更改为id将是一个变量，页面上的每个幻灯片都将有其唯一的id作为编号。我应该如何更改更改javascript代码使其适用于每张幻灯片？非常感谢您的回答，但我对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';
}