Как да обтекате текст около изображение с HTML или CSS

Когато поставите снимка в уеб страница, браузърът по подразбиране я показва над или под текста, оставяйки празно пространство отляво и отдясно. Това заема излишно място и прави изображението да изглежда отделено от съдържанието. С помощта на HTML или CSS можете да зададете позициониране, при което текстът се обтеква около границите на изображението.

HTML

Стъпка 1

Отворете HTML‑файла в текстов редактор и намерете тагa <img>. Вътре в тагa добавете атрибута align със стойност в кавички, например:

<img src="picture.jpg" align="left">

Стъпка 2

Изберете една от следните стойности: left, right, top, middle или bottom. left и right поставят изображението в съответната страна и оставят текста от другата страна. top, middle и bottom контролират вертикалното подравняване на текста спрямо изображението.

След като зададете атрибута, запазете файла.

CSS

Стъпка 1

В същия <img> таг добавете атрибута style преди затварящата ъглова скоба:

<img src="picture.jpg" style="float:left;">

Стъпка 2

В стойността на float посочете left или right. При float:left изображението ще бъде вляво, а текстът ще се обтекава отдясно; при float:right – обратното.

Запазете документа и обновете страницата, за да видите резултата.