Как сделать обтекание картинки текстом в html

В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье html тег <img>, чтобы иметь базовые знания по изображениям на html страницах.

1. Обтекание с помощью стилей тега <img>

Картинку можно выровнять только оперируя со стилями CSS тега <img>. Как известно синтаксис тега допускает в атрибутах задавать выравнивание изображения:

<img align=VALUE src="foto1.jpg">

где VALUE может принимать значения

  • left — выравнивание по левому краю
  • right — выравнивание по правому краю
  • bottom — выравнивание по первой строке текста (это значение стоит по умолчанию)
  • top — выравнивание по верхней строке текста
  • middle — выравнивание по базовой строке текста

Например

<html>
<body>
<p>text text text text text text
<img align="left" src="foto1.jpg">
text text text text text text
</p>
</body>
</html>

Вот как это будет выглядеть на странице:

Картинка как бы слиплась с текстом, поэтому сделаем отступы. Причем есть два варианта как это можно сделать.

Вариант 1.1. Через свойство CSS — hspace и vspace

Для этого в атрибутах тега <img> добавляем два значения:

<img hspace="10" vspace="10" align="left" src="foto1.jpg">

Вот как это будет выглядеть на странице:





Атрибут hspace задает горизонтальный отступ в пикселях, vspace – соответственно вертикальный

Вариант 1.2. Через свойство CSS — padding и margin

Для этого в атрибутах тега <img> добавляем два значения:

<img style="margin:10px 10px 0px 0px" align="left" src="foto1.jpg">

Вот как это будет выглядеть на странице:

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

Использование свойства float вместо align

Помимо свойства align в атрибутах тега <img> в стилях есть CSS свойство float, которое также отвечает за выравнивание. Синтаксис следующий:

float:right; // Выравнивание по правой стороне
float:left; // Выравнивание по левой стороне

Например, если написать в предыдущем примере вывод картинки следующим образом:

<img style="margin:10px 10px 0px 0px; float:right;" src="foto1.jpg">

То это преобразуется в следующее:

Благодаря float можно задавать единый class для картинок, что очень даже удобно.

2. Обтекание изображения через <div>

Все изображения можно помещать в блоки <div>. А уже самому тегу <div> задать стиль с выравниванием относительно страницы и отступами.

//в стилях CSS:
.img_class{
margin: 10px 10px 0px 0px;
float: right;
}
//в теле страницы body
<div class="img_class">
<img src="foto1.jpg">
</div>




Читайте также:

• Как добавить кнопку "Наверх" на сайте

• Как сделать якорь ссылки

• Как сделать форму обратной связи на php с каптчей

• Как скруглить углы в HTML через CSS

• Как вставить музыку на сайте

• Как сделать карту изображений (карта ссылок)

• Как сделать слайдер

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.