Как создавать обтекание картинки текстом html? CSS: Обтекание элементов.
В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье 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; // Выравнивание по левой стороне
Например, если написать в предыдущем примере вывод картинки следующим образом:
То это преобразуется в следующее.
Задача
Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.
Решение
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float , добавляемого к селектору IMG . Значение left выравнивает изображение по левому краю, right - по правому. Обтекание при этом происходит по другим, свободным сторонам.
Пример 1. Обтекание картинок
HTML5 CSS 2.1 IE Cr Op Sa Fx
Доклад лейтенанта Бокатуева
Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного
противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной
контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава
потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился
в бою взводный Кудряшев М.А., грамотно использовавший человеческие ресурсы
своего взвода. В результате операции были захвачены элементы внеземной культуры, которые
переданы аналитической группе.
Пресс-релиз аналитической группы
В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось
психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших
над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии
аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в
состоянии аффекта.
Результат данного примера показан на рис. 1.
Рис. 1. Текст с иллюстрациями
Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin , которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.
Довольно часто перед верстальщиком ставятся определенные нестандартные задачи. Наша цель – предложить наиболее рациональное и правильное решение. Сегодня речь пойдет об особенностях обтекания текстом изображения.
Постановка задачи
Написание какой-либо статьи для вашего информационного ресурса или блога не редко будет сопровождаться вкраплением по ходу изложения текста картинок. Так как поисковый робот всегда уважал наличие картинок на сайте, да и пользователя больше порадует текст с яркими изображениями. Отсюда вытекает потребность в установке особого способа форматирования, который обеспечит красивое взаимодействие текста и картинки.
Рассмотрим тот случай, когда обтекание текстом не требуется. Причем предлагаю универсальный вариант – при отсутствии картинки текст растягивается на всю ширину блока (не все же Ваши статьи будут сопровождаться иллюстрациями). Ширина блока с текстом строго не фиксирована. Ниже показано, как должен будет выглядеть наш блок.
Правильное решение
Для реализации поставленной задачи создаем два блока: один для картинки, второй – для текста. С учетом того, что под картинкой может располагаться еще какие-либо элементы, для картинки мы создаем отдельный контейнер, в противном случае этого не требуется, можно просто присвоить тегу с изображением необходимый класс.
HTML
< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" > Текстовый блок
Display: inline; }
Это стандартное решение для текста, который будет обтекать блок с картинкой. Выглядеть это будет следующим образом:
Вполне логично будет предложить присвоить и тексту свойства плавающего объекта. При не установленных значениях ширин объекта получим такую картину
Чтобы избежать такого эффекта, просто нужно указать значения ширины текстового блока, но это не соответствует условиям нашей задачи.
Следующим неплохим вариантом будет предложение воспользоваться свойством margin-left . Так как для блога, скорее всего, все картинки в данном блоке будут унифицированы по размерам, то решение в принципе не плохое и действенное. Однако это всего лишь частный случай, так как при отсутствии картинки в статье слева будет просто пустая полоса. Это нас не устраивает. Мы же ищем универсальное решение!
А самое правильно решение, как часто бывает, является наипростейшим. Чтобы достичь нужного форматирования текстового блока – необходимо обратиться к свойству overflow со значением hidden . Не забываем про неповторимый Internet Explower. Он как обычно выделывается и требует дополнительного внимания! Чтобы наш старичок нормально отработал добавляем текстовому блоку свойство float (после обращения к свойству overflow определение фиксированной ширины не потребуется).
Таким образом, мы пришли к правильному решению, которое приведет к эффекту, указанному на картинке в подразделе, в котором описывались условия нашей задачи.
Image { float: left; /*обтекание */ margin: 10px; /*внешний отступ для красоты */ display: inline; /* для IE6, чтоб отступ слева не удвоился */ } . text{ overflow: hidden; float: left; }
Недостатки метода и альтернатива
Несмотря на простоту и универсальность метода, заключающегося в применении оverflow:hidden , есть один недостаток. Свойство перестанет выполнять свои функции, если в текстовой части будут использоваться выпадающие элементы.
В этом случае потребуется альтернатива для настройки нужного форматирования. Эта методика будет основываться на функционале комбинации display:table-cell; . Это решение такое же действенное, но слегка уступает в простоте первому способу. При обращению к этому методу также необходима установка layout для работы в среде Internet Explower
Img { float: left; /* задаем обтекание */ margin: 10px; /* отступ для красоты */ display: inline; /* для IE6, чтоб отступ слева не удвоился */ } . text{ display: table- cell; zoom: 1 ; /* Осторожно! Строка невалидна */ }
И это решение обладает своими особенностями, которые нужно учитывать при верстке. Если текстовая часть будет достаточно короткой, то следующий блок будет выводится справа от блока с классом text. Чтобы этого избежать необходимо текстовый блок и картинку заключить в отдельный контейнер.
В каких браузерах работает?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
Как сделать обтекание картинки текстом
В предыдущей статье мы рассматривали вопрос, в текст, теперь будем учиться делать обтекание картинки текстом.
Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво - текст не обтекает картинку. Сейчас мы это исправим.
Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:
- Обтекание картинки текстом средствами HTML;
- Обтекание картинки текстом средствами CSS;
- Обтекание картинки текстом средствами редактора Joomla.
Обтекание картинки текстом в HTML
Для того, чтобы текст обтекал картинку мы выделим фрагмент документа с картинкой и пропишем стиль для этого фрагмента прямо внутри HTML документа. Здесь нужно определиться, по какому краю вы будете выравнивать изображение по левому или по правому. Если вы выравниваете картинку по левому краю, нужно чтобы текст обтекал ее справа. И наоборот, если вы вставляете картинку справа, нужно чтобы текст обтекал картинку слева.
Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать отступы: сверху - 5px, справа - 10px, снизу - 5px, слева - 0px.
- Для выделения фрагмента (блока) в документе в HTML служит элемент …
- Для определения стиля элемента служит универсальный атрибут
С помощью CSS свойства float картинка была сделана плавающей с левой стороны.
Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку
по правой и нижней стороне. - Для определения стиля элемента служит универсальный атрибут