Html 如何在浮动div中设置多行文字而不扩展其宽度

我想在我的内容中使用浮动图像和一些关于该图像的文本

我使用这个HTML+CSS来实现：

<p class="container">
<img src="http://www.google.com.ua/images/logos/ps_logo2.png" width="200"/>
<span class="text">Some text wider that image image image blablabla</span>

但，若关于图像的文本较宽，则为展开浮动父对象。我不想有这种行为。我想将父p元素的最大宽度限制为图像的宽度

下面是关于JSFIDLE的示例：

---

我可以通过位置做我想做的事情：绝对和填充底部，但我不知道填充底部的值。jsfiddle.net/wBVqt/3/

您是否尝试过在容器上放置一个宽度？（如果希望验证代码，无论如何都应该这样做，因为所有浮动元素都应该有一个宽度）

---

如果您想要不同大小的图像，我看不到仅使用css的解决方案，请检查我的：

---

如果您的容器中有很多图像，它仍然可以工作。如果没有图像，它会将原来的100%宽度设置为容器。

我不知道宽度，图像的宽度不同。你在哪里读到过，所有浮动元素都应该有一个宽度？你的CSS将在不在浮动上加宽度的情况下进行验证，但这样做是最好的做法。

.container { float:right; border:2px solid #000; }
.container img { display:block; margin-bottom:10px; }

.container { float:right; border:2px solid #000; width: 200px; }

var imageWidth = 0;
$('.container img').each(function(index, el){
    if(el.width > imageWidth) {
        imageWidth = el.width;
    }
});
imageWidth = imageWidth ? imageWidth : '100%';

$('.container').css('width', imageWidth);