自动调整元素（div）以适合水平内容

Question

我尝试使用谷歌搜索，但没有提出太多。我正在建造一个水平旋转木马，显示LI中的图像，浮动。我想解决的问题是，每当我向旋转木马添加缩略图时（我是懒人加载），我需要重新计算旋转木马的宽度（以便所有浮动的缩略图并排排列）。

首先，我不必在JS中进行这些类型的计算，而对于两个，我发现很难找到一种跨浏览器的方式来确保正确计算宽度（我最终不得不添加或者从总宽度中删除像素，具体取决于浏览器。）

所以我的问题是，如果没有JS，有没有办法将内容添加到div中，并根据需要调整宽度，就像div的高度一样？

如果没有，您是否找到了比每次重新计算宽度更有效的方法来处理这种情况？

我不是网络开发人员的新手，只要我一直在这个领域，据我所知，这是前所未有的。但随着新技术的出现，我想也许现在有一种模糊的方法来实现这一目标。

提前致谢！

[编辑]（澄清，但简化）：如果我的轮播宽度为500px，隐藏溢出。有一个可滑动的部分，包含缩略图，每个都是100px宽，浮动，它们在旋转木马中适合5个。当用户单击“下一步”时，它会延迟加载下一组5个缩略图，并在第一组5之后将其附加到滑块区域。但由于此div为500px宽以容纳5个缩略图，添加另外5个，我需要重新计算使新缩略图并排显示的宽度。理想情况下，我想找到一种方法让div自动调整其宽度以适应水平内容，就像它自然对垂直内容一样。

Answer 1

我发现使用包含white-space: nowrap和overflow: hidden的旋转木马div已经有效了。然后我为div中的每个项目display: inline-block。

Answer 2

为每个项目使用此类：

.eachItem {
   display: inline-block;
}

会工作（我做过类似的事情）。

问题是在IE7中它不起作用！你无论如何都必须使用JavaScript :(

编辑：我的意思是内联块...而且你可能知道，IE7并不“喜欢”它。