Довольно часто перед верстальщиком ставятся определенные нестандартные задачи. Наша цель — предложить наиболее рациональное и правильное решение. Сегодня речь пойдет об особенностях обтекания текстом изображения.

Постановка задачи

Написание какой-либо статьи для вашего информационного ресурса или блога не редко будет сопровождаться вкраплением по ходу изложения текста картинок. Так как поисковый робот всегда уважал наличие картинок на сайте, да и пользователя больше порадует текст с яркими изображениями. Отсюда вытекает потребность в установке особого способа форматирования, который обеспечит красивое взаимодействие текста и картинки.

Рассмотрим тот случай, когда обтекание текстом не требуется. Причем предлагаю универсальный вариант — при отсутствии картинки текст растягивается на всю ширину блока (не все же Ваши статьи будут сопровождаться иллюстрациями). Ширина блока с текстом строго не фиксирована. Ниже показано, как должен будет выглядеть наш блок.

Правильное решение

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

HTML

<div class="image">
		<img src="img.png" width="100px" height="100px" alt=""/>
	</div>
	<div class="text">
		Текстовый блок
	</div>

CSS

.image {
		float: left; /*обтекание */
		margin:10px; /*внешний отступ для красоты */
		display:inline; /* для IE6, чтоб отступ слева не удвоился */
	}

Это стандартное решение для текста, который будет обтекать блок с картинкой. Выглядеть это будет следующим образом:

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

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

Следующим неплохим вариантом будет предложение воспользоваться свойством margin-left. Так как для блога, скорее всего, все картинки в данном блоке будут унифицированы по размерам, то решение в принципе не плохое и действенное. Однако это всего лишь частный случай, так как при отсутствии картинки в статье слева будет просто пустая полоса. Это нас не устраивает. Мы же ищем универсальное решение!

А самое правильно решение, как часто бывает, является наипростейшим. Чтобы достичь нужного форматирования текстового блока — необходимо обратиться к свойству overflow со значением hidden. Не забываем про неповторимый Internet Explower. Он как обычно выделывается и требует дополнительного внимания! Чтобы наш старичок нормально отработал добавляем текстовому блоку свойство float (после обращения к свойству overflow определение фиксированной ширины не потребуется).

Таким образом, мы пришли к правильному решению, которое приведет к эффекту, указанному на картинке в подразделе, в котором описывались условия нашей задачи.

CSS

.image {
		float: left; /*обтекание */
		margin:10px; /*внешний отступ для красоты */
		display:inline; /* для IE6, чтоб отступ слева не удвоился */
	}
.text{
	overflow:hidden;
	float:left;
}

Недостатки метода и альтернатива

Несмотря на простоту и универсальность метода, заключающегося в применении оverflow:hidden, есть один недостаток. Свойство перестанет выполнять свои функции, если в текстовой части будут использоваться выпадающие элементы.

В этом случае потребуется альтернатива для настройки нужного форматирования. Эта методика будет основываться на функционале комбинации display:table-cell;. Это решение такое же действенное, но слегка уступает в простоте первому способу. При обращению к этому методу также необходима установка layout для работы в среде Internet Explower

CSS

.img {
	float: left; /* задаем обтекание */
	margin:10px; /* отступ для красоты */
	display:inline; /* для IE6, чтоб отступ слева не удвоился */
}
.text{
	display:table-cell;
	zoom:1; /* Осторожно! Строка невалидна  */
}

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

В каких браузерах работает?