只允许某些内部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;，使其自动延伸以适合内容。同时给Block＃2和Block＃3 overflow:auto;，使它们伸展以适应它们的内容。

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

请参阅：http://jsfiddle.net/TFLMX/2