css / html - no-wrap 等效于 div / 元素容器的自动宽度答案

【问题标题】：css / html - no-wrap equivalent for div / auto width of element containercss / html - no-wrap 等效于 div / 元素容器的自动宽度
【发布时间】：2012-07-28 16:00:57
【问题描述】：

我有一个图像滑块/查看器，其中包含一堆图像的绝对定位 div 位于固定宽度的相对 div 内。问题是图像在绝对定位的 div 中一个在另一个下方，而不是在水平方向上彼此相邻 - 即使它们被赋予属性 float:left; - 如何防止它们换行（类似于通过 no-wrap 属性防止文本这样做？我可以给绝对定位的 div 一个包含其所有元素的宽度属性，而不通过 javascript 计算该宽度吗？这是代码：

<div id="homeSlider" style="width:800px; position:relative;">
    <div id="homeSlides" style="position:absolute;">
        <img class="homeSlide" src="images/temp-portfolio.jpg" alt="Portfolio Item"/>
        <img class="homeSlide" src="images/temp-portfolio.jpg" alt="Portfolio Item"/>
    </div>
</div>

【问题讨论】：

您应该可以将#homeSlides 的宽度设置为一个较大的值（例如 10000px）而不会出现任何问题，只需执行此操作，看看会发生什么。
谢谢 - 我知道这很奇怪且没有必要，但我宁愿准确
可以提供jsFiddle吗？在示例中，您发布的图像是水平放置的。
它们应该水平放置，但是由于 homeSlides 的宽度被限制为 homeSlider 的宽度，所以 homeSlide 项目不会水平浮动并相邻

标签： javascript html css

【解决方案1】：

最简单的做法（如果可能的话）是将img 项设置为display: inline-block，然后将homeSlides 设置为white-space: nowrap，并避免float 一起使用。

See fiddle.

【讨论】：