» »

Создать обтекание картинки текстом на CSS

Создать обтекание картинки текстом на CSS

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

И иногда получается не очень, так как большие отступы и по сути она нужна, но не сильно вписалось в сам написанный мануал. В таком случай можно применить обтекание, что гораздо улучшить само принятие или изучение. Все сделаем на HTML и стилях CSS, где зададим отступ.

Что раз пропишите его в стилистике, и потом можно применять на всех категориях ресурса. Также некоторые делают на визуальном редакторе, но кто не знает как все произвести, то здесь намного легче и понятнее.

Чтоб все получилось отлично, изначально нужно в теги img прописать некоторые атрибуту, как align, где изначально присваивается значение, которое должно соответствовать самуму обтеканию.

И если рассматривать Атрибуту align, то здесь можно ему присвоить такие значение.

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

2. top - Здесь наоборот идет, а точнее первая строка выйдет у верхнего края изображение, что расположение находится по левую сторону.

3. right - задает по умолчанию выравнивание к правому краю, а вот описание как раз будет обтекать в противоположной, в левой стороны.

4. left - задаем выравнивание с левой стороны или края, но соответственно контент будет обтекать с правой стороны.

5. middle - выравняю, что отвечает за цент, середина картинки.

Приступаем к установке обтекание изображение на стилях CSS.

Это самый легкий способ, что если будите делать несколько, то каждому присваиваете свой класс. Чтоб обтекание сделать по обеим сторонам, то подключаем left и right, где также используется align атрибут.

Вот так проверил на тестовом сайте, где расположил в теле портала.

HTML обтекание картинки текстом

Это после, когда все сохранит визуально так смотрится.

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

HTML код с картинкой:
Код
<img class="img-zornet_ru" src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png" width="86" height="49"/>


CSS - здесь видим отступ по на 10 пикселей, также есть рамка, но это возможно кому то пригодится, если нет, то border:2px solid #е3р58; просто убираем или на прозрачный цвет выставить можно.

Код
.img-zornet_ru{
  float:left;
  margin:0 10px;
  border:2px solid #е3р58;
}

На этом все, как видите не сложно, и главный плюс, это самый удобный создать облагание картинки м применение CSS. Так как все можно редактировать, что в этом плане все очень гибко на выставление параметров.
04.11.2017 Просмотров: 352 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Kosten
Kosten 05.11.2017 12:221
0
А можно обтекание картинки по тексту делать не привязывая к ней class так как это будет делать дополнительную подгруздку к чтение сайта при открытии.

Например, удобней так:

Код
<div class="block">
<img src="ссылка на картинку">
Текст текст текст текст
</div>


Код
<style>
.block img{float:left; height:50px;}
</style>
workman
workman 05.11.2017 15:032
0
Чтобы поучиться самому то вот можно уйти на пример сюда
avatar