Как сделать обтекаемый текст в html

Атрибуты тэга

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

Пример 1
Изображение без подписи

Пример 2
Для изображения с подписью

Подпись

Для изображения с подписью надо заключить картинку и ее описание в блок

CSS: Обтекание элементов

Все HTML-элементы на веб странице располагаются в общем потоке, сверху вниз (для блочных элементов) и слева на право (для строчных элементов). Такой способ отображения мало эффективен, но благодаря CSS предоставляется возможность изменить дизайн в лучшую сторону.

Плавающие элементы

Свойство float позволяет сделать элемент плавающим, смещая его в левую или правую сторону, в зависимости от того, какое значение установлено:

• left — смещает элемент влево
• right — смещает элемент вправо
• none — отменяет плавание элемента

Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).

Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен «плавать», всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.

Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он «плавает» на странице.

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

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

Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.

Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.

     p < width: 250px; >img  
  С помощью CSS свойства float картинка была сделана плавающей с левой стороны. Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку по правой и нижней стороне.
   

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

Отмена обтекания

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

Для CSS свойства clear можно установить одно из значений:

• left — плавающие элементы запрещены с левой стороны.
• right — плавающие элементы запрещены с правой стороны.
• both — плавающие элементы запрещены с обеих сторон.
• none — разрешает наличие плавающих элементов с обеих сторон.

     div < width: 400px; >img < float: right; >p  
  
С помощью свойства clear установлено, что плавающие элементы запрещены с правой стороны. Текст, расположенный ниже картинки, не будет обтекать картинку по левому краю.
 
   

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

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

Для того, чтобы сделать обтекание текста по контуру картинки с прозрачным фоном в HTML, можно использовать свойство CSS shape-outside .

Необходимо добавить изображение на страницу HTML:

 src="path/to/image.png" alt="image" class="image" /> 

Далее, добавить стили CSS для изображения:

.image  float: left; shape-outside: url('path/to/image.png'); shape-margin: 20px; > 

Добавляем текст, который будет обтекать изображение:

 class="text"> Текст, который будет обтекать изображение.  

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

.text  overflow: hidden; >