Как установить многострочный текст в плавающем div, не увеличивая его ширину

Question

Я хочу использовать изображение floatet с текстом об этом изображении в моем контенте.

Я использую этот 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>

И CSS для него:

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

Но, если текст об изображении шире, он расширяется с плавающей точкой родителя.Я не хочу такого поведения.Я хочу ограничить максимальную ширину родительского элемента p шириной изображения.

Вот пример на jsfiddle: http://jsfiddle.net/wBVqt/1/

Я могу делать то, что хочу, через позицию: абсолютное и нижнее для заполнения, но я не знаю значения для нижнего заполнения.jsfiddle.net/wBVqt/3/

Answer 1

Я не вижу решения только с css, если вы хотите иметь изображения разных размеров, так что проверьте мое решение с jQuery :

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

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

Это будет работать, если выесть много изображений в вашем контейнере.Если у вас нет изображений, изначально будет установлено значение 100% ширины контейнера.

Answer 2

Вы пробовали просто положить ширину на контейнер?(Что вы должны сделать в любом случае, если вы хотите, чтобы ваш код проверялся, так как все плавающие элементы должны иметь ширину).

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