如何设置 div 的宽度以适应内容？
Posted
技术标签:
【中文标题】如何设置 div 的宽度以适应内容？【英文标题】：How to set width of a div to fit the contents? 【发布时间】：2013-10-16 23:13:50 【问题描述】：我已经搜索了一整天，但我找不到我想做的事情的解决方案。我知道这个标题有很多问题，但没有一个对我有用。
我想做的是移动设备的触摸滚动。
这是我的html：
<body>
<div id="slider_container">
<div class="wrapper">
<span>Image</span>
</div>
</div>
</body>
至少有 2 个 span 包含图像，最多 10 个 span 包含图像。会有一些php代码和span number会根据用户上传的照片而改变。
这是我的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 之外。
希望我能说清楚。
感谢所有回答...
【问题讨论】：
这能回答你的问题吗？ ***.com/questions/450903/… 我已经搜索过了，但是没有用。请参阅我对 Switchfire 答案的评论。 【参考方案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
【讨论】：
感谢您的回答。这有助于页面上的第一个滑块。对于其他人来说，它没有用。因此，我将 更改为 id 将是一个变量，并且页面上的每张幻灯片都有其唯一的 id 作为数字。我应该如何更改 javascript 代码以使其适用于每张幻灯片？非常感谢您的回答，但我对 javascript 了解不多。以上是关于如何设置 div 的宽度以适应内容？的主要内容，如果未能解决你的问题，请参考以下文章
如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏