изображение с плавающей точкой осталось без переноса текста - PullRequest
17 голосов
/ 21 сентября 2011

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

По какой-то причине у меня чертовски много времени получается заставить работать с 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>

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

Спасибо!

Ответы [ 3 ]

52 голосов
/ 21 сентября 2011

Вот решение для вашей проблемы (p { overflow: hidden})

http://jsfiddle.net/simoncereska/BnQRW/

0 голосов
/ 21 сентября 2011

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

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

0 голосов
/ 21 сентября 2011

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

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

...