Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Как сделать обтекание картинки текстом при помощи HTML и CSS

Добрый день уважаемые читатели, в сегодняшней очередной статье на abrek-ad-abra.ru мы с вами будем говорить о том, как сделать на своём проекте обтекание картинки текстом с помощью html и css инструментов. Конечно если для своего сайта вы используете какой либо известный CMS например вордпресс то для того, чтобы вставить картинки обтекающие текстом при написании статьи, лучше всего будет использовать специальный плагин текстового редактора поддерживающий данную функцию. Но нередко при ведении сайта или блога возникает необходимость вставить обтекаемое текстом изображение прямиком в html документ, именно о подобных случаях мы и поговорим с вами сегодня.

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

Как мы с вами выяснили в прошлой статье, как вставить изображение в html за вывод картинки в html у нас отвечает тег: «img». А значит первым делом нам необходимо прописать следующую строчку:

<img src="<https://полный путь к картинке>">

После этого изображение уже будет отображаться на нашем ресурсе. Далее, чтобы его позиционировать, нам понадобится атрибут: «align» с определённым значением, именно это значение в дальнейшем и будет определять по какому именно краю от текста будет расположена картинка в посте.

Стандартные значения атрибута «align»

  • «left» — Картинка расположена слева а текст справа;
  • «right» — Картинка располагается справа текст соответственно слева;
  • «bottom» — (вертикальное выравнивание) Данное значение используется по умолчанию в случае отсутствия в коде тега: «align». В данном случае графика у нас будет располагаться с левого края статьи а текст справа у его нижней части. Думаю не совсем понятно, но дальше мы рассмотрим это подробней и на живом примере;
  • «top» — Примерно тоже, что и в случае с «bottom» только в данном случае контент будет расположен у верхней границы графического файла;
  • «middle» — При этом значении текст поста будет начинаться ровно от центра изображения, хорошо подходит для вставки в текст смайлов или ещё каких либо маленьких картинок.

Итак, как же это всё у нас будет выглядеть на практике?
При использовании атрибута «align» совместно со значением «bottom»:

<img src= "<https://путь к изображению>" align="bottom">

Мы получим следующее расположения картинки обтекающее текстом:

Как ранее уже было сказано именно такое расположения картинки с обтекающим её текстом будет выводиться браузером по умолчанию если атрибута: «align» не будет вообще.

Значения: «left» заставит текст обтекать картинку следующим образом:

<img src= "адрес картинки" align="left">

«right» — картинка будет находиться справа, а текст слева:

<img src= "путь к изображению" align="right">

При значении: «top» начальная строчка текста будет располагаться у верхней границы картинки:

<img src= "расположения файла" align="top">

«middle» — при таком значении текст начнёт обтекать картинку ровно от её середины:

<img src= "файл" align="middle">

Мы рассмотрели с вами варианты обтекания картинки текстом с помощью одного лишь html и, как видите во всех вариантах есть небольшой недостаток, а именно это отсутствие отступов непосредственно между картинкой и текстом статьи. Поэтому для устранения этого недостатка мы с вами прибегнем к возможностям свойств css стилей.

Делаем обтекание картинки текстом с помощью CSS свойств

Чтобы установить необходимые отступы между картинкой и обтекающем её текстом и тем самым предать странице более симпатичный вид нам потребуется к уже имеющемуся коду картинки дополнительно прописать специальный класс для css стилей.

Итак задаём специальный класс для css стилей. Вы можете для данного класса выбрать абсолютно любое слово, у меня это слово «foto»:

<img src= "адрес картинки" class="foto">

Далее, данному классу «foto» нам необходимо создать сами css стили например:

.foto {
float:left;
margin: 4px 10px 2px 0px;
}

Данные стили «foto» нам нужно вставить в файл темы ресурса под названием: style.css, либо непосредственно в html страницу между тегов <head>и</head> предварительно заключив их в <style>и</style>. Вы можете поменять значения стилей на свои тем самым более точно подстроив обтекание картинки текстом под дизайн своего проекта.

Давайте рассмотрим, что у нас заданно в «foto».

float:left; Картинка слева, текст обтекает справа.
margin: 4px 10px 2px 0px; Отступы между изображением и обтекающим текстом.

Вот так у вас должно получиться:

Так же вы можете добавить в приведённые выше стили, что либо своё, например взять изображение в рамочку:

.leftfoto{
float:left;
margin: 4px 10px 2px 0px;
border:1px solid #CCC;
padding:6px;
}

И теперь у нас получится примерно так:

На сегодня у меня всё по поводу обтекания картинки текстом при помощи HTML и CSS, надеюсь статья вам была полезной оставляйте своё мнения в комментариях, желаю всего доброго, до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-21

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог