Позиционирование изображения при обтекании текстом

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

Такое позиционирование текста достигается, благодаря помещению его в дополнительный <div>, которому указывается свойство display: table. Если бы был всего один параграф с текстом, то дополнительный <div> не понадобился бы, достаточно было бы применить display: table к блоку параграфа. Однако, если на практике используется несколько параграфов, то их приходится помещать в отдельный контейнер, иначе второй и последующие параграфы съедут под изображение.

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

Описанное ниже решение применимо в двух следующих случаях:

1. Если используется более одного абзаца с текстом.
2. Если изображение имеет постоянную ширину.

Пусть, к примеру, у нас будет следующий html-код:

<ul>
<li>
<img src="image.jpg" alt="" />
<p>Параграф с текстом</p>
<p>Еще один параграф с текстом</p>
</li>
</ul>

Приступим к стилям.

Шаг 1-й

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

ul li {padding-left: 147px}
ul li img {float: left}

Получаем вот такую картину:

Шаг 2-й

Следующим стилем мы позиционируем изображение:

ul li img {
float: left;
position: relative;
left: -135px;
}

Пример обретает следующий вид:

Шаг 3-й

Теперь остается ликвидировать разрыв между изображением и текстом путем добавления отрицательного отступа справа от изображения:

ul li img {
float: left;
position: relative;
left: -135px;
margin-right: -135px;
}

И вот результат:

Как альтернатива, изображение можно позиционировать абсолютно.

h++p://dimox.name/simple-image-css-positioning-technique/