Div 宽度取决于其中的图像宽度答案

【问题标题】：Div width depending on image width that is inside itDiv 宽度取决于其中的图像宽度
【发布时间】：2013-03-29 18:34:34
【问题描述】：

需要 CSS 帮助。

我有一个向左浮动的 div，里面是具有固定高度和自动宽度的图像。我希望主 DIV 宽度与图像宽度完全相同。

<div class="item">
   <img src="http://upload.wikimedia.org/wikipedia/commons/4/49/Sports_shoes.jpg" alt="" />
   <a href="">Name here</a>
</div>

FIDDLE - 您可以看到名称在图像的右侧，但它应该在底部。

那么，有没有办法让 DIV class="item" 始终具有图像的宽度。如您所见，图像宽度可能不同。

我正在寻找跨浏览器解决方案，这意味着显示：table-cell;不是解决方案，因为 IE7 -8 不支持它。

* 我的 jquery 脚本块向左浮动，需要帮助

【问题讨论】：

【解决方案1】：

制作图片display: block。 <img> 元素默认是内联的。

现场演示： http://jsfiddle.net/szPdR/1/

对于 IE 支持和其他棘手的浏览器使用 jQuery，请参阅FIDDLIE

【讨论】：

你也可以做主播a标签display: block。
@AndrewS width: min-content on the "item" 元素将解决该问题，但它仅在 Firefox 和 Chrome 中有效（带前缀）。 现场演示：jsfiddle.net/szPdR/3
是的，但是 iE 呢？如何解决这个问题，因为这是我发布这个问题的主要问题
@AndrewS 是的，你可以用 JavaScript 做到这一点：jsfiddle.net/szPdR/4 我想不出一个可以在 IE 中工作的 CSS 解决方案。
是的，但它需要一些改变。我的代码/脚本从浮动到左侧停止jsfiddle.net/szPdR/5

【解决方案2】：

使用 CSS 实现

div {
    width:auto;
}

【讨论】：