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

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

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

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

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

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

Шаг 1-й

Шаг 2-й

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

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

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

Шаг 2-й

Шаг 3-й

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

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

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

Шаг 3-й

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

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

Комментарии (45)
  1. 1
    @

    Вот еще похожее решение нашел :)
    Статья: http://ghettocooler.net/2005/11/13/
    Пример: http://ghettocooler.net/img/floats-no-wrap/
    Давненько было написано :)

  2. 2
    akaGamlet

    img
    {
    float: left;
    position: relative;
    margin-left: — /* маргин на который сдвинули*/
    }
    и все

  3. 3
    Romka

    хм… ребят а вот я все время весь контент пихаю в div’ы привык из-за пользования визуальным редактром )) и вот у меня наоборот по вашему методу получается: пихать текст в отдельный див) так что пошел дальше искать )

  4. 4
    Romka

    :D нашел про див) мб ко му то пригодится: прямо в нужный див в параметры добавляем все замечательно! ) написано еще после того как обтекание закончилос дописать: только и без этого все прекрасно )

  5. 5
    Владимир
    @

    А можете подсказать как установить картинку в нужном мне месте дива? Страница у меня генерируется автоматически, поэтому влезть в тег img не могу