Обтекание картинки текстом CSS /HTML
Обтекание картинки текстом CSS помогает удобно разместить материал на страницах сайта. Для этого используется свойство float и margin. Значение left выравнивает изображение по левому краю, right — по правому и соотвественно текст красиво обтекает вокруг свободных сторон картинки.
Пример
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan. Suspendisse potenti. Donec imperdiet consequat orci, id imperdiet elit faucibus quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan. Suspendisse potenti. Donec imperdiet consequat orci, id imperdiet elit faucibus quis.
HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan.
CSS
.left-img < float:left; /* Выравниваем по левому краю */ margin: 10px 10px 10px 0; /* Настраиваем отступы вокруг картинки */ >.right-img < float: right; /* Выравниваем по правому краю */ margin: 10px 0 10px 10px; /* Настраиваем отступы вокруг картинки */ >
Все для начинающего вебмастера
Обучающие статьи и советы, как правильно сделать сайт и настроить сервер
Делаем обтекание картинки текстом на HTML и CSS
Очень важно красиво разместить все элементы на странице, чтобы всё смотрелось органично и стояло на своих местах. Чтобы сделать всё правильно нельзя обойтись без CSS. Чтобы притянуть картинку к левому краю дописываем атрибут align=left после .jpg» и закрываем скобки />, чтобы притянуть картинку вправо аналогично вставляем align=right. Конечно, текст обтекает картинку, но отступов он сам не сделает, поэтому в любом случае необходима работа с CSS. Существует много способов решения данной проблемы, рассмотрим самые правильные и несложные варианты.
Первый вариант
Заключите нужное изображение в тег div, затем откройте файл CSS и придайте ему вот это значение: float: left (right = лево-право на ваше усмотрение) и проставьте нужные отступы.
Второй вариант
Присвойте нужному изображению класс. В CSS добавьте поля float: left (right). Margin: 15px 15px 15px 0 — длина отступа: сверху, справа, снизу (отступ к которому прижимается текст к картинке, по умолчанию равен нулю). Случается, что нужно оформить несколько изображений на одной странице. К примеру, изображения находятся в посте. В коде страницы он отображается приблизительно вот так:
В файле CSS, в этом примере необходимо дописать:
.content img
После этого, все картинки в элементе «content» будут отображаться с заданными вами отступами. А если понадобиться одну картинку выставить по-другому — задайте id (id=your_img), а в CSS допишите:
#your_img
Как наложить на картинку текст
Иногда нужно написать текст прямо на изображении, что-то ввиде анонса или назвния. Как и в прошлом случае способов несколько:
Первый вариант
Сделайте блок, вставьте в него текст, саму картинку сделайте фоном данного блока.
Этот вариант подойдёт и для логотипа, и для шапки.
Второй вариант
Сразу создать два блока, первый с картинкой, второй с текстом (сделайте полупрозрачный фон). И наложить один на другой задав необходимые параметры.
.text
В этом примере первый блок размещен внутри второго при помощи свойства под названием position. У блока с текстом задан нужный фон и сам внедрён в нижнюю часть картинки.
На самом деле здесь нет ничего сложного. Сделать красивое обтеканием текстом, а также наложить нужные слова на изображения достаточно просто. Необходимо немного времени. чтобы вникнуть во все эти тонкости и внимательно следовать приведённым ниже инструкциям.
Не бойтесь экспериментировать с дизайном, делайте ваш сайт ещё красивее, подбирайте лучший вариант, и тогда ваш сайт, и вы как его владелец добьётесь успеха.
Как сделать обтекание картинки css
Как вы наверное знаете, что элементы «Dom» имеют либо строчный тип — например span, либо блочный — например div
Рассмотрим обтекание текстом справа блочного элемента
Для того, чтобы текст обтекал справа блочный элемент «div», создадим данный тег вместе с классом » obtekanie_tekstom_sprava «
Добавим стили к данному классу(class), основное свойство для обтекания текстом справа — это «float:left;» :
Соберем весь код вместе:
.obtekanie_tekstom_sprava <
float:left;/* Положение справа */
background: #fd0; /* Цвет фона */
width: 100px; /* Ширина */
Напишем несколько строк бессмысленного текста, для того, чтобы посмотреть на обтекание текстом справа. Данный текст находится выше блочного элемента.
Класс — obtekanie_tekstom_sprava
Этот и далее текст находится ниже блока. который имеет свойство обтекания справа — «float:left;»
Как видим, расположенный текст ниже блока «обтекает тестом справа«.
И также мы наблюдаем прилипание текста к блоку — это не совсем интересно выглядит — поэтому, в следующем пункте, мы этот недостаток решим!
Обтекание текстом строчного элемента справа.
Выше мы рассмотрели пример «обтекание текстом справа» блочного элемента.
Теперь давайте используем строчный элемент span
Добавим класс «obtekanie_tekstom_sprava_1».
Который будет похож на обтекание теста справа на выше приведенный пример, только добавим еще margin справа » margin-right: 29px; «
Соберем весь код вместе:
Результат обтекания текстом справа строчного элемента :
Чтобы рассмотреть подробнее результат обтекания текстом справа, нам понадобится какой-то тестовый текст, который и будет подопытным текстом.
Данного текста должно быть много, чтобы он смог обтекать наш элемент справа. Выше приведенный текст, абсолютно весть написан выше нашего элемента.
Класс — obtekanie_tekstom_sprava_1 + margin Обтекающий текст справа , мы расположим ниже строчного элемента, который мы должны применить обтекание текстом справа.
Со слов » Обтекающий текст справа «, который покрашен в красный цвет, он весь расположен ниже строчного элемента.
И как вы наверное заметили, что различия между обтеканием текстом справа блочного или строчного элемента не отличается ничем!
Обтекание текстом картинки справа.
Следующим рассмотрим «обтекание справа текстом» картинки. Нам потребуется какая-то картинка, которая меньше шириной основного текстового блока :
Как видим. наша картинка расположилась по умолчанию, и текст? что расположен физически на одной строке с картинкой, расположился на одной строке с картинкой, но всего лишь одна строчка!? Почему так? Чтобы посмотреть код нажмите исследовать элемент
Нам нужно, чтобы данную картинку обтекал текст справа, не только одна строка, а весь текст обтекал его справа.
Для обтекания текстом справа нам понадобится :
Берем нашу подопытную картинку, которую будем обтекать текстом справа + добавим класс «obtekanie_tekstom_sprava_2«
Добавим стили к нашему классу :
Соберем весь код вместе:
Результат обтекания текстом справа картинки.
Далее посмотрим на результат обтекания нашей картинки текстом справа. Этот текст написан выше картинки. Этот текст покажет обтекание текста справа от картинки.
Следующий текст будет физически находиться ниже картинки.
Чтобы посмотреть в коде нажмите исследовать элемент
margin: 4px 20px 4px; добавил для того, чтобы по трем направлениям текст не прилипал к блоку, это соответственно : «верх, справа, низ»
Как сделать обтекание картинки текстом в HTML?
Не редко, при публикации статьи или при заполнении страниц сайта, мы используем изображения для наглядности подаваемого материала, а так же для того, что бы разбавить скучный контент.
При этом, если изображение расположено непосредственно в теле статьи, будет значительно лучше, если текст будет обтекать изображение. В случае, если ваш сайт сделан на базе какой-либо CMS сделать обтекание картинки текстом в HTML не сложно, достаточно выбрать нужный способ обтекания на панели инструментов в визуальном редакторе.
Навигация по статье:
- Обтекание картинки текстом CSS
- Обтекание картинки текстом в HTML
Если же ваш сайт сделан без использования CMS, или у вас нет возможности использовать визуальный редактор при форматировании, то показанные в данной статье способы задать обтекание картинки текстом в HTML, будут для вас очень полезны.
Обтекание картинки текстом в HTML
Для задания нужного обтекание картинки текстом в HTML нам достаточно в теге img указать атрибут align с присвоенным значение, который соответствует нужному способу обтекания. Атрибуту align можно задать следующие значения:
- bottom – значение которое задается по умолчанию. Первая стока находится у нижнего края картинки. Картинка располагается с лева
- top – в этом случае первая стока находится у верхнего края картинки. Картинка располагается с лева
- right –картинка выравнивается по правому краю, а контент обтекает ее по левому
- left — изображение выравнивается по левому краю, а контент обтекает ее с правой стороны
- middle – в данном случае происходит выравнивание серединый изображения по базовой линии строки
Наиболее часто используются атрибуты right и left, для правого и левого обтекания. Данные варианты наиболее привычны для восприятия, и придают тексту с изображением наиболее компактный вид.
Вот пример использования атрибута align: