html - 只让某些内部div控制外部div的宽度

Question

我有以下 html 结构:

<div id="container">
    <div id="block1">
        <img src="someimage/path" />
    </div>
    <div id="block2">
        Some Text
    </div>
    <div id="block3">
        Some Text
    </div>
</div>

容器是float:left。容器将拉伸(stretch)到最宽的 div，但如果我只希望它跟随 block1，并根据 block1 中图像的大小让 block2 和 block3 的文本换行怎么办。对于我现在的标记，如果文本很长，它会将容器 div 推出尽可能远的文本，但我希望文本仅与图像一样宽，几乎就像图像标题一样。有什么想法吗？

Answer 1

使用 overflow:auto; 制作容器 display:inline-block; 以便它自动拉伸(stretch)以适应内容。也给 block #2 和 block #3 overflow:auto; 以便它们拉伸(stretch)以适应它们的内容。

不幸的是，您需要使用 JavaScript 来获取图像的宽度。请参阅下面的示例，我在其中使用 jQuery 对其进行了修复。

参见:http://jsfiddle.net/TFLMX/2