我搜索了一整天，但找不到解决我想做的事情的方法。我知道这个标题有很多问题，但没有一个对我有用。
我想做的是移动设备的触摸滚动。
这是我的 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 自动宽度和溢出。
我希望我能说清楚。
谢谢大家的回答...
最佳答案
您必须使用 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';
多个 slider 的替代代码:
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';
}
关于html - 如何设置div的宽度以适合内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19274671/