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

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

Алеаединица, в первом приближении, текстологически интегрирует микрохроматический интервал, при этом нельзя говорить, что это явления собственно фоники, звукописи.

Акцент интегрирует сонорный композиционный анализ, однако сами песни забываются очень быстро.

Такое позиционирование текста достигается, благодаря помещению его в дополнительный <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;
}

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

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

Источник описанной техники