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。容器将延伸到最宽的 div，但如果我只希望它跟随 block1，并根据 block1 中的图像大小让 block2 和 block3 的文本换行怎么办。对于我现在的标记，如果文本很长，它会将容器 div 推出到文本的尽头，但我希望文本只与图像一样宽，几乎就像图像标题一样。有任何想法吗？

Answer 1

制作容器display:inline-block;，overflow:auto;使其自动拉伸以适应内容。也给第 2 块和第 3 块overflow:auto;，以便它们伸展以适应它们的内容。

不幸的是，您需要使用 JavaScript 将宽度设为图像的宽度。请参阅下面的示例，我使用 jQuery 修复它。

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