Как убрать обтекание текстом картинки? Обтекание элементов

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

В предыдущей статье мы рассматривали вопрос, в текст, теперь будем учиться делать обтекание картинки текстом.

Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво - текст не обтекает картинку. Сейчас мы это исправим.

Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:

1. Обтекание картинки текстом средствами HTML;
2. Обтекание картинки текстом средствами CSS;
3. Обтекание картинки текстом средствами редактора Joomla.

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

Для того, чтобы текст обтекал картинку мы выделим фрагмент документа с картинкой и пропишем стиль для этого фрагмента прямо внутри HTML документа. Здесь нужно определиться, по какому краю вы будете выравнивать изображение по левому или по правому. Если вы выравниваете картинку по левому краю, нужно чтобы текст обтекал ее справа. И наоборот, если вы вставляете картинку справа, нужно чтобы текст обтекал картинку слева.

Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать отступы: сверху - 5px, справа - 10px, снизу - 5px, слева - 0px.

1. Для выделения фрагмента (блока) в документе в HTML служит элемент
   
   

   …
2. Для определения стиля элемента служит универсальный атрибут
   Л. Толстой. Война и мир. Том второй. Часть третья

   

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

   «Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей...

   В данном случае мы получим последовательное размещение элементов на странице:

   Теперь на той же странице применим свойство float , изменив стили следующим образом:

   Image { float:left; /* обтекание слева */ margin:10px; margin-top:0px; } .sidebar{ border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin-left:10px; font-size: 20px; float: right; /* обтекание справа */ }

   Соответственно изменится и размещение элементов на странице:

   Элементы, к которым применяется свойство float , еще называют floating elements или плавающими элементами.

   Запрет обтекания. Свойство clear

   Иногда возникает необходимость запретить обтекания. Подобная задача может быть актуальна, если какой-то блок должен переноситься вниз на новую строку, а не обтекать плавающий элемент. Например, футер, как правило, должен находиться строго внизу и растягиваться по всей ширине страницы. Если же перед футером находится плавающий элемент, то футер может обтекать этот элемент, что не желательно.

   Для запрета обтекания элементов в CSS применяется свойство clear , которое указывает браузеру, что к стилизуемому элементу не должно применяться обтекание.

   Свойство clear может принимать следующие значения:

   left: стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает

   right: стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает

   both: стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз

   none: стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

   Например, пусть на веб-странице будет определен футер:

   

   Copyright MyCorp. 2016

   Наличие обтекания будет создавать некорректное отображение, при котором футер смещается вверх:

   Изменим стиль футера:

   Footer{ border-top: 1px solid #ccc; clear: both; }

   Теперь футер не будет обтекать изображение, а будет уходить вниз.

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

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

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

   

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

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

   Например

   Text text text text text text text text text text text text

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

   Вариант 1.1. Через свойство CSS - hspace и vspace
   Для этого в атрибутах тега добавляем два значения:

   

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

   

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

   Вариант 1.2. Через свойство CSS - padding и margin
   Для этого в атрибутах тега добавляем два значения:

   

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

   

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

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

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

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

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

   

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

   Как сделать обтекание картинки текстом в HTML и CSS - 4.4 out of 5 based on 16 votes

   Сегодня изображения используются в интернете практически повсеместно. Невозможно себе представить веб страницу на которой нет изображения. Картинки привлекают внимание, улучшают внешний вид и восприятие текста. Поэтому в данном уроке мы научимся позиционировать изображения по отношению к тексту и рассмотрим как сделать обтекание картинки текстом в HTML, а так же при помощи CSS свойств и значений.

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

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

   Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML: . Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:

   

   Где foto.jpg - это относительный путь к картинке..jpg

   У тега img имеется атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align="left" по левому краю). Атрибут align имеет следующие значения:

   • left - изображение будет расположено по левому краю, а текст будет обтекать его справа;
   • right - изображение расположится справа, а текст будет обтекать его слева;
   • bottom - отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
   • top - тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
   • middle - при данном значении происходит выравнивание середины изображения по базовой линии строки.

   Теперь рассмотрим каждый элемент на практике.

   1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:

   

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

   

   

   3. Для выравнивания изображения по правому краю нужно соответственно прописать:

   

   

   4. Теперь рассмотрим вертикальное выравнивание. Если применить значение top, то первая строчка текста будет расположена на против верхней границы изображения.

   

   

   5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.

   

   

   Обтекание картинки текстом при помощи свойств CSS

   На самом деле, те примеры создающей обтекание текста и позиционирование картинки, которые мы рассмотрели выше являются немного устаревшими, сейчас принято все элементы отвечающие за внешний вид страницы делать при помощи свойств и значений CSS.

   Разберем простой пример, как сделать обтекание картинки текстом, когда картинка расположена по левому краю, а текст обтекает ее справа. При этом между текстом и картинкой зададим определенные отступы.

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

   

   Теперь классу leftfoto нужно присвоить определенные CSS стили.

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

   Данный код располагают между тегами ..., заключив в теги или помещают во внешний файл стилей CSS.

   Разберем те элементы, которые мы здесь задали:

   • float:left; - мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align="left".
   • margin: 4px 10px 2px 0px; - мы задали внешние отступы, 4px - от верха, 10px - справа, 2px снизу и 0px слева от изображения.

   С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.

   Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin .

   Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;} .

   Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;} , или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

   Разметка HTML

   List of towns in England

   Amersham

   Amersham is ....jpg">Buxton is ...

   Chesterfield

   Chesterfield is ....jpg">

   It has ....jpg">Dartmouth is ...

   CSS стили

   Body { margin: 0; background: #FFF8E8; padding: 0 20px; font-size: 90%; counter-reset: h2; /*создаем счетчик для любого заголовка h2*/ } h1 { font-family: "Lora", serif; color: #564C4A; font-weight: 300; } h2 { font-family: "Lora", serif; color: #B00D22; font-weight: 300; clear: both; /* отменяем обтекание с обеих сторон */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */ } h2:before { content: " " counter(h2) ". "; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */ } p { font-family: arial; color: #785F5B; line-height: 1.3; } /********** картинка слева **********/ .left { float: left; margin: 0 1em 1em 0; } /********** картинка справа **********/ .right { float: right; margin: 0 0 1em 1em; } /********** картинка между текста **********/ .columns { float: left; max-width: 30%; margin: 0; } .img-center { float: left; margin: 0 1.5% 0 1.5%; max-width: 37%; } /********** картинка по центру********* */ .center { display: block; margin: 0 auto 1.5%; }

   Обтекание картинки с двух сторон

   

   Приём заключается в том, что текст помещается в два блока одинаковой ширины с небольшим промежутком посередине. С помощью псевдоэлементов:before и:before в каждый блок добавляется заглушка шириной в половину картинки и высотой, равной высоте картинки. Картинка абсолютно позиционируется таким образом, что закрывает собой эти пустые блоки, в результате чего и получается эффект обтекания с двух сторон.

   Разметка HTML

   

   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus