保持外部div宽度不受内部img的影响，但由于内部文本不宽

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;
}

Answer 2

所以你的主要问题是关于#innertext，对吗？ 我想你可以尝试将#innertext作为#outerdiv的一部分来修复，这样#innertext将取决于#outerdiv的大小而不是将其推出，就像这样：

#innertext{
 width: 90%;
}