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

我尝试了谷歌搜索，但没有提出太多。我正在构建一个水平旋转木马，它在LI中显示图像，并且浮动。我想解决的问题是，每次我给轮播（我是懒加载）添加缩略图时，我需要重新计算轮播的宽度（以便所有漂浮的缩略图并排排列）。自动调整元素（div）以适合水平内容

一方面，我宁愿不必在JS中进行这些计算，而对于两种方法，我发现很难找到一种跨浏览器的方式来确保宽度将被正确计算（我最终不得不根据浏览器添加或删除总宽度中的像素）。

所以我的问题是，是否有没有JS的方式，能够添加内容到一个div，并根据需要调整宽度，就像div的高度一样？

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

我不是新来的网络开发，只要我一直在这个领域，据我所知，这是不可能的。但随着新技术的出现，我想可能现在有一种模糊的方式来实现这一点。

在此先感谢！

[编辑]（澄清，但简化）：如果我的旋转木马是500px宽，溢出隐藏。有一个包含缩略图的可滑动部分，每个宽度都为100px，漂浮在旋转木马中的5个部分。当用户点击Next时，它会延迟加载下一组5个缩略图，并在第一组5后将其附加到滑块区域。但由于该div的宽度为500px以容纳5个缩略图，因此需要重新计算5个缩略图宽度以获得新的缩略图并排显示。理想情况下，我想找到一种方法让div自动调整其宽度以适应水平内容，这与垂直内容自然相同。

来源

2011-03-18 Alex Heyd

我不完全理解你在问什么，如果你可以创建一个小例子，（http://jsfiddle.net），或者如果你画了一张图片 – thirtydot 2011-03-18 19:40:37

我发现，使用。一个包含转盘的div与white-space: nowrap和overflow: hidden已经工作，然后我有display: inline-block在div中的每个项目

来源

2011-03-18 20:44:53

很好，谢谢，white-space：nowrap是关键 – 2011-03-18 21:22:06

使用这个类为每个项目：

.eachItem { 
    display: inline-block; 
}

将工作（我做过类似的东西）。

问题是，在IE7中它不会工作！你将不得不使用JavaScript反正:(

编辑：我的意思是inline-block的......正如你可能知道，IE7并不“喜欢”这

来源

2011-03-18 19:44:51 jackJoe

这是否真的有效？我做了一个快速测试，但它绝对不会根据其内容使父div更广泛（实际上它将它视为像显示块），我想到了行块处理的元素像块级元素（填充和尺寸适用），但它与内容的其余部分保持内联，如跨度，但不一定使父宽度更大（如果跨度包含实际上很长的单词，并上升到一个div的边缘，它下降到一个新的行，而不是让父母更宽） – 2011-03-18 19:49:34

在阅读你的编辑后，我脑海中有一个适合屏幕宽度和内部的正面div一个巨大的宽度div可以容纳大拇指，这样它就可以工作，并且可能用一些箭头“穿过大拇指”来导航，你可以显示一些代码吗？ – jackJoe 2011-03-18 19:52:57

回复评论＃1：取决于你的其他风格......我不确定那里发生了什么，但从我收集的信息来看，你的div不够宽（因此调整大小），所以你可以尝试我的第二个建议。 – jackJoe 2011-03-18 19:54:52

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

回答

相关问题