аватар |

Статьи / CSS /

Как сделать обтекание изображения (картинки) текстом средствами CSS?


Наверное, уже на многих сайтах Вы видели обтекание изображения текстом. Подобное размещение материала экономит место и служит для связи иллюстраций с содержимым.

Используем свойство float. В качестве параметра указываем по какой стороне выравниваем изображение. С margin, надеюсь, понятно - чтобы текст не вплотную прилегал к обтекаемому изображению.

Код HTML, CSS

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обтекание</title>
  <style>
   .leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 10px 10px 10px 0; /* Отступы вокруг картинки */
   }
   .rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 10px 0 10px 10px; /* Отступы вокруг картинки */
   }
  </style>
 </head>

 <body>

  <h2>Сталинградская битва</h2>
  <p><img src="images/1.jpg" alt="Сталинградская битва" width="120" class="leftimg">
     Является крупнейшей сухопутной битвой в ходе Второй мировой войны, которая наряду со сражением на Курской дуге стала переломным моментом в ходе военных действий, после которых немецкие войска окончательно потеряли стратегическую инициативу. Сражение включало в себя попытку вермахта захватить правобережье Волги в районе Сталинграда (современный Волгоград) и сам город, противостояние Красной армии и вермахта в городе и контрнаступление Красной армии (операция <i>Уран</i>), в результате которого 6-я армия и другие силы союзников нацистской Германии внутри и около города были окружены и частью уничтожены, а частью захвачены в плен.</p>
      <p>По приблизительным подсчётам, суммарные потери обеих сторон в этом сражении превышают два миллиона человек. Державы Оси потеряли большое количество людей и вооружения и впоследствии не смогли полностью оправиться от поражения.</p>

     <h2>Курская битва</h2>
  <p><img src="images/2.jpg"  width="120" alt="Курская битва" class="rightimg">
В советской и российской историографии принято разделять сражение на 3 части: Курскую стратегическую оборонительную операцию (5 — 23 июля), Орловскую (12 июля — 18 августа) и Белгородско-Харьковскую (3 — 23 августа) стратегические наступательные операции, являющиеся важнейшей частью плана летне-осенней кампании 1943 года. Битва продолжалась 49 дней. Немецкая сторона наступательную часть сражения называла операция <i>Цитадель</i>.</p>
<p>В результате наступления по плану <i>Кутузов</i> была разгромлена орловская группировка немецких войск и ликвидирован занимаемый ею орловский стратегический плацдарм. В ходе операции <i>Полководец Румянцев</i> прекратила своё существование белгородско-харьковская группировка немцев и был ликвидирован этот важнейший плацдарм.[9] Коренной перелом в ходе Великой Отечественной войны, начатый под Сталинградом, был завершен в ходе Курской битвы и сражения за Днепр.</p>

 </body>
</html>

Главным тут является использование свойства float (выравнивание). В примере с первым изображение по левому краю, со вторым - по правому.

Демонстрация Скачать исходники
 



Распечатать
Похожие статьи
31 мая 2017 18:46 Как создать индикатор (полосу) прокрутки страницы на CSS3?
15 мая 2017 18:13 Как сделать видео фоном блока на CSS?
08 июня 2017 12:54 Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?
16 октября 2014 12:40 Как закрепить футер или подвал внизу web-страницы CSS?
17 июля 2015 12:15 Как создать красивую всплывающую подсказку на сайте с помощью CSS?


Комментарии к статье (vk.com)