Разработка и продвижение проектов

теги:

Категории

Рубрики
от 235000 

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

Чтобы сделать обтекание картинки текстом в CSS, можно использовать свойство «float». Свойство «float» размещает элемент внутри контейнера в зависимости от указанного значения: left, right, none или inherit.

Пример использования для обтекания картинки текстом:

HTML:

<div class="container">
  <img src="image.jpg" alt="image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam consequat, euismod elit eu, sodales lacus. Donec suscipit rutrum justo porta dapibus. Nulla facilisi. Phasellus eu metus efficitur, dictum justo non, consequat nibh. Praesent purus mauris, accumsan in porta vel, aliquam at mi.</p>
</div>

CSS:

img {
  float: left;
  margin-right: 10px;
}

Здесь мы задаем значение «float: left;» для картинки, чтобы она обтекала текст справа. А со свойством «margin-right: 10px;» мы добавляем отступ справа, чтобы текст не прилипал к картинке.

Чтобы обтекание работало корректно, картинка должна идти до текста в коде, иначе не будет обтекания.

Также можно использовать значение «float: right;» для обтекания текстом слева от картинки.

Поделиться:

Комментарии

Оставьте комментарий

Смотрите также

Сотрудничество

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

В данный момент мы предлагаем:

  • Интернет-маркетинг
  • Услуги SEO специалиста
  • Разработка сайтов на Wordpress, Bitrix, а также самописных на React
  • Разработка нативных приложений для iOS и Android
  • Разработка игр для мобильных платформ
  • UX/UI дизайн

Ждем и ваших предложений в форме ниже

Оставьте заявку для сотрудничества с командой Lion Digital Agency

Отправляя заявку вы даете согласие на обработку персональных данных.

Задать вопрос

Мы ответим в ближайшее время!

Отправляя заявку вы даете согласие на обработку персональных данных.

Быстрый заказ

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

Отправляя заявку вы даете согласие на обработку персональных данных.