CSS выровненный текст вокруг изображения

Question

для обтекания текста вокруг изображения:

HTML

<div>
  <span id="photo"><img src="photo.png"</span>
  <span id="text">Lorem Ipsum, blah, blah, blah ...</span>
</div>

CSS

#photo {float:left;margin:0px 8px 5px 0px;}
#text {text-align:justify;}**

Текст обтекает изображение, но оно неоправданно (выравнивание по левому краю). Если я перемещу текстовый элемент влево, то выравнивание будет правильным (оправдано, как я хочу), но тогда текст не обтекает изображение, а течет ниже изображения - как это исправить?

Answer 1

Свойство text-align фактически принадлежит элементу вложенного блока, а не элементу inline. Так что переместите его в ограждающий блок:

div { text-align: justify; }

См. 16.2 Выравнивание: свойство text-align каскадных таблиц стилей Уровень 2, редакция 1 (CSS 2.1) :

Это свойство описывает, как встроенный содержимое блока выровнено . Ценности имеют следующие значения:

(выделение добавлено)

Answer 2

Вам нужно либо вынуть изображение из диапазона, либо переместить его влево.