Обтекание картинки текстом
С помощью свойства float можно выровнять изображение по левому ( img
Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin .
Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p
Также можно расположить изображение по центру страницы img
Обтекание картинки с двух сторон
Приём заключается в том, что текст помещается в два блока одинаковой ширины с небольшим промежутком посередине. С помощью псевдоэлементов :before и :before в каждый блок добавляется заглушка шириной в половину картинки и высотой, равной высоте картинки. Картинка абсолютно позиционируется таким образом, что закрывает собой эти пустые блоки, в результате чего и получается эффект обтекания с двух сторон.
Как сделать обтекание картинки текстом?
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору img . Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
В примере 1 введены два стилевых класса leftimg и rightimg , при добавлении их к <img> картинка выравнивается по соответствующей стороне, а текст при этом обтекает картинку.
Пример 1. Обтекание картинок
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Обтекание</title> <style> .leftimg < float:left; /* Выравнивание по левому краю */ margin: 7px 7px 7px 0; /* Отступы вокруг картинки */ >.rightimg < float: right; /* Выравнивание по правому краю */ margin: 7px 0 7px 7px; /* Отступы вокруг картинки */ ></style> </head> <body> <h2>Доклад лейтенанта Бокатуева</h2> <p><img src="image/n1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился в бою взводный Кудряшёв М.А., грамотно использовавший человеческие ресурсы своего взвода. В результате операции были захвачены элементы внеземной культуры, которые переданы аналитической группе.</p> <h2>Пресс-релиз аналитической группы</h2> <p><img src="image/n2.jpg" alt="Учёные, находящиеся в состоянии аффекта" В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии аффекта, растащили прототип по деталям. Возможно, наши учёные до сих пор находятся в состоянии аффекта.</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Текст с иллюстрациями
Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет пространство между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.
Как сделать, чтобы текст был справа от картинки?
Как сделать, чтобы текст был справа от картинки на экранах <768px?
- Первый вариант. Надо положить картинку и текст в один блок 1, картинке задать, например, float:left . Потом еще надо создать пустой блок 2 внутри блока 1 (или clearfix — ::after ), задать блоку 2 свойство clear:left .
- Второй вариант. Положить картинку и текст в один блок 1, блоку 1 задать position:relative , картинке задать position:absolute; top:0px; left:0px; ,текст положить в параграф, параграфу задать margin-left , равный ширине картинки
Лучше всего всё переписать под нормальную блочную верстку с css display «table» :
А то блоки и параграфы в ссылке. включайте музыку поспокойнее когда программируете 🙂