Обтекание изображения текстом

Использование картинок в html-страничке всегда более информативно и наглядно, по-сравнению со сплошным текстом.

Вставить картинку в html-текст возможно несколькими способами и в классике этих способов 3:

• выравнивание изображения по центру
• обтекание изображения текстом
• размещение изображения в поле

Выравнивание изображения по центру

Для выравнивания изображения по центру колонки текста, проще всего тег поместить в контейнер

, для которого ставится атрибут align="center". Если ожидается частое использование картинок, то оптимальнее будет применение CSS стиля для тега

. Как это реализовано, смотрите в примере 1.

В данном примере к контейнеру

добавляем CSS-класс cimg, в котором прописывается выравнивание по центру строки. То, как это будет схематично выглядеть - показано на рисунке 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание изображения текстом

Обтекание изображения текстом — один из самых распространненых способов верстки HTML-страниц, который позволяет эффективно использовать все свободное пространство. популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для того чтобы настроить обтекание изображения текстом можно использовать несколько способов, основанных как и на HTML так и на CSS.

Рис. 2. Рисунок выровнен по левому краю страницы и обтекается текстом справа

Для того, чтобы осуществить обтекание изображения текстом с помощью HTML нужно помнить, что у тега есть атрибут align, который определяет выравнивание изображения в документе и при этом указывает способ обтекания изображения текстом. Для того, чтобы сделать выравнивание изображения по правому краю и задать обтекание слева, нужно использовать align="right", для выравнивания по левому краю и обтекания текстом справа используем align="left". Здесь также полезно использовать атрибуты тега — vspace и hspace, которые указывают на каком расстоянии текст будет обтекать изображение по вертикали и горизонтали. Без указания этих атрибутов текст будет вплотную прилегать к изображению (пример 2).

 
  
  
 
 
  

   
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  
 

Для того чтобы настроить обтекание изображения с помощью CSS стилей будем использовать правило float. float:right - выравнивает изображение по правому краю документа и делает обтекание текстом слева, а float:left делает выравнивает изображение по левому краю документа и обтекание текстом справа от изображения (пример 3).

 
  
  
  
 
 
  

   
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  
 

Здесь к тегу добавляется класс cimg, у которого установлено выравнивание по правому краю float:right, а обтекание картинки слева и снизу задано свойствами padding-left:10px и padding-bottom:10px.

Изображение на поле

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

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рисунок 3).

Рис. 3. Размещение изображения в поле слева от текста

Я знаю два способа создать подобную структуру - с помощью HTML-тегов

Таблицы: данный способ удобен тем, что легко и понятно позволяют организовать колоночную структуру с помощью ячеек. Данный способ является олдскульным и его применение не особо приветствуется в современном веб-дизайне. Считается что данный способ избыточен и сложен в правке. Но все новички через него проходят. Для такой структуры нам потребуется таблица с тремя колонками, в первой колонке будет само изображение, в третьей текст, а между ними мы укажем отступ - во второй колонке. Можно обойтись и двумя колонками, а отступ указать через CSS-стили или с помощью атрибута width тега (пример 4).

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

то, что получится в результате показано на рисунке 4.

Рис. 4. Изображение на поле слева от текста

В примере 4 ширина изображения составляет 90 пикселей, а ширина колонки, где он располагается — 110 пикселей. Разница между ними обеспечивает нам нужный отступ от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте - vertical-align: top.

CSS-стили: Данный пример более предпочтителен и оптимален. Здесь нам потребуется два слоя

 
  
  
  
 
 
  

   
  
  

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