Изображение с плавающей жидкостью, оставшееся без текстовой упаковки

Нет причин, по которым это должно быть трудно. Еще раз в день вы можете просто создать таблицу и поместить изображение в первую ячейку, а текст - на второй. Легко, как пирог.

По какой-то причине я получаю чертовски время, чтобы это работало с css, и я знаю css довольно плавно. Я уверен, что я просто не замечаю надежного ответа.

Я хочу добиться:

  • Изображение с динамическим размером (вытаскивается из базы данных) перемещается влево - текст описания вправо с обтеканием ниже изображения при достижении высоты изображения.

Что не будет работать:

  • Установка поля слева на текст (ширина изображения не согласована)
  • Установка ширины/плавающего справа по тексту (опять же, ширина изображения динамическая, поэтому правильная ширина текста будет неизвестна)

Пример кода (pre css):

<div class="demo">
    <img src="dynamic_sized_image.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Надеюсь, есть ответ!

Спасибо!

Ответы

Ответ 2

Я не думаю, что это возможно с чистым css, потому что у вас есть динамический атрибут.

Используйте javascript для вычисления ширины img, затем вы можете узнать ширину текста (при условии, что контейнер #demo имеет фиксированный размер). Установите ширину через js и используйте этот css: http://jsfiddle.net/GcV3S/

Ответ 3

Самый простой и лучший способ - установить фиксированный размер изображения. Просто масштабируйте их, это в большинстве случаев улучшит макет и внешний вид вашего сайта. Если вам действительно нужно это установить без установки фиксированной ширины для текстового блока или блока изображения, я действительно не знаю ответа в данный момент, извините.

Единственный способ, которым я могу сейчас думать, - использовать javascript для изменения ширины текста... Тем не менее интересный вопрос.