Intereting Posts
Как сделать HTML-код неактивным с комментариями Получить определенные элементы из HTML в UIWebView Показать / скрыть формы с помощью кнопок и javascript Выровнять десятичные данные в столбце таблицы на десятичную точку, HTML5, CSS3 Делать предметы в flexbox занимать все вертикальное и горизонтальное пространство высота: 100% таинственно не работает Текстовые поля, обработанные как элементами css, не выравниваются с соответствующим текстом Какие элементы HTML могут получать фокус? масштаб преобразования работает неправильно для нечетных ширины пикселей Div Высота в процентах Преобразование строки Android и преобразование html-объектов Как разрешить только числовые (0-9) в поле ввода HTML с помощью jQuery? Могут ли метки метки атрибута ассоциироваться с обычным div? установить все css3 background-image с помощью jquery Как заставить flexbox включать дополнение в вычисления?

Как обернуть текст вокруг изображения с помощью HTML / CSS

Я хочу создать блок текста, например, следующую картинку:

( https://docs.google.com/file/d/0B8gEuF9U3SaENzNsOTdxMmV3Ykk/edit?usp=sharing )

введите описание изображения здесь

Вопрос, возможно ли это?

вы должны float свой контейнер изображения следующим образом:

HTML

 
...some other random text
... some random text ...

CSS

 #container{ width: 400px; background: yellow; } #floated{ float: left; width: 150px; background: red; } 

FIDDLE

http://jsfiddle.net/kYDgL/

С помощью CSS Shapes вы можете идти на один шаг дальше, чем просто плавать текст вокруг прямоугольного изображения.

Фактически вы можете обернуть текст таким образом, чтобы он принял форму края изображения или полигона, который вы его обертываете.

DEMO FIDDLE (В настоящее время работает над webkit – caniuse )

 .oval { width: 400px; height: 250px; color: #111; border-radius: 50%; text-align: center; font-size: 90px; float: left; shape-outside: ellipse(); padding: 10px; background-color: MediumPurple; background-clip: content-box; } span { padding-top: 70px; display: inline-block; } 
 
PHP

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Добавление к ответу BeNdErR :
Элемент «другой ТЕКСТ» должен иметь float:none , например:

 
...some other random text
...some random text ...
...some random text ...some random text

http://jsfiddle.net/watz5fg8/3/

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

 #container:before { content: ' '; display: table; width: 10em; /* Min width required */ } #floated{ float: left; width: 150px; background: red; }