Ограничение ширины div шириной изображения внутри него

Question

Вечерний передний волшебник. Я пытаюсь сделать что-то, что должно быть довольно простым: я хочу, чтобы изображения плавали вправо или влево в содержимом моего тела, с подписью под каждым изображением. Чтобы попытаться добиться этого, я плаваю div с изображением внутри него, а затем следует span с подписью ниже. Я дал максимальную ширину изображения 100%, поэтому мой макет отзывчивый.

Есть ли способ использовать только CSS и HTML, чтобы я мог ограничить ширину содержащего элемента div шириной изображения внутри него? Я обнаружил, что промежуток ниже выталкивает ширину div, независимо от того, отображается ли он: встроенный блок или нет. Я бы хотел, чтобы интервал всегда был такой же ширины, как и изображение, поэтому текст будет перенесен на правый край изображения.

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

Любые предложения с благодарностью приняты! Вы можете видеть то, о чем я говорю в http://jsfiddle.net/andfinally/yBHjK/

Answer 1

Попробуйте установить max-width для контейнера, а затем width: 100% для изображения. Он должен работать.

Смотри http://jsfiddle.net/nMEVd/1/

Answer 2

Похоже, вы хотите, чтобы содержащий div увеличивал свою ширину только для элементов img, а не для элементов span. Это правильно?

Для этого не существует чистого решения CSS, JavaScript - лучший способ добиться того, чего вы хотите.

Два похожих вопроса:

• CSS: принудительно переносить текст (или определять ширину элемента только одним из его дочерних элементов)

• Ограничить текст шириной родственного изображения / автоматической ширины в CSS

Answer 3

Вы можете попробовать добавить:

style="word-wrap: break-word;"

к элементу span или в листе css с:

.image span {
    word-wrap: break-word;
}

Редактировать: Это должноразбить текст в элементе span так, чтобы он занимал две или более строки, а не растягивался по ширине изображения.