Часто при верстке страниц необходимо решить задачу обтекания текстом картинки.
Для решения этой задачи средствами CSS необходимо присвоить картинке класс и указать для этого класса стилевое свойство float. Использование значения left - выравнивает изображение по левому краю. Значение right - по правому краю.
Обтекание текста картинкой происходит вплотную к картинке, что не совсем красиво. Чтобы это исправить, необходимо также применить свойство margin, которое добавит отступ между текстом и картинкой.
Рассмотрим пример:
СSS-код:
.img {
float: left;
margin: 10px 10px 10px 0px;
}
HTML-код:
Текст, который обтекается картинкой, которая находится слева от текста. Отступ, между картинкой и текстом указан в размере 10px.
Результат примера:
Текст, который обтекается картинкой, которая находится слева от текста. Отступ, между картинкой и текстом указан в размере 10px.