html - 保持内部 img 的外部 div 宽度，但不会因内部文本而变宽

Question

我有一些看起来像这样的 HTML:

<div id="outerdiv">
    <img id="imageDiv" src="file here" />
    <div id="innertext">Some text here</div>
</div>

我希望 #outerdiv 宽度由图像宽度定义。图像宽度可变。问题是 #innertext 中的文本将 #outerdiv 扩展到页面的整个宽度。

更新:作为菜鸟，我还不能回答我自己的问题，但是......

我通过添加一行 jQuery 让它工作。

$('#outerDiv').width($('#imageDiv').width());

Answer 1

您可以将 outerdiv 的宽度设置为零，然后图像会在需要时将其推出。

HTML

<div id="outerdiv">
    <img src="file here" width="50px" />
    <div id="innertext">Some text here</div>
</div>

CSS

#outerdiv {
    width:0px;
}