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

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

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

Как вы должны знать, изображение вставляется на веб-страницу с помощью тега img. У него есть один обязательный атрибут – “src”(source), который задает путь до картинки. Что будет, если мы просто вставим изображение рядом с текстом? Смотрите скриншот.выравнивание картинки

Как видно, сбоку осталось много неиспользованного места, но сейчас мы это исправим. Обтекание картинки (да и вообще любого другого элемента) задается в css. Для этого есть свойство float. По сути, у свойства есть два значения, которые нам сейчас интересны:
Left – элемент прижимается к левому краю, все остальные элементы и текст обтекают его справа.
Right – прижимается к правому краю.

Отлично, давайте попробуем на практике. Поскольку в нашем примере всего одно изображение, то в css можно обратиться к нему по селектору img. На реальном сайте так делать, конечно, не стоит, потому что правило обтекания применится ко всем картинкам.

Img{
	Float: left
}

Результат:Как реализовать в html обтекание картинки текстом

Ну так-то оно получше, правда? Пока текст располагается очень близко к изображению, но это исправляется заданием внутренних или внешних отступов картинке.

Соответственно, справа картинку можно расположить так:

Img{
	Float: right;
}

Как сделать обтекание текстом картинки слева в html
Вот, собственно, и весь секрет обтекания изображений текстом. Именно таким в статьях изображения прижимаются к левому или правому краю, а свободное место занимает текстовая информация.

Отмена обтекания

Для отмены этого свойства прописывается float: none. После этого элемент начинает вести себя по обычным правилам. Свойство float уже давно введено в css и его использование является абсолютно правильным с точки зрения веб-стандартов. Плавающие блоки (float) поддерживаются во всех браузерах, которые сегодня используются.

Теперь при необходимости вы сможете сделать в html обтекание картинки текстом. Ну или хотя бы будете знать о том, как это работает и что вся суть в css свойстве float.

Комментариев: 1
  1. seoonly.ru

    Спасибо! Отличный урок

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: