Как сделать картинку слева в css

Чтобы поместить картинку слева от текста в CSS, можно использовать свойство float. Оно позволяет выровнять блок с картинкой влево или вправо относительно текста.

Вот пример кода, который поместит картинку слева от текста:

<div class="wrapper">
  <img src="path/to/image.png" alt="Image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
.wrapper {
  width: 400px;
}

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

Здесь мы создали обертку с классом «wrapper» и разместили в ней картинку и текст. Помещаем блок с картинкой перед абзацем, чтобы картинка отображалась слева от текста.

В CSS мы установили ширину для обертки и добавили свойство float с значением left для изображения. Таким образом, картинка будет выровнена по левому краю обертки и отображаться слева от текста. Дополнительно мы добавили отступ справа (margin-right), чтобы появился небольшой интервал между текстом и картинкой.

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

Таким образом, чтобы поместить картинку слева от текста в CSS, нужно использовать свойство float со значением left для картинки и добавить отступы при необходимости.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать картинку слева в css

Наш специалист свяжется с вами в ближайшее время и уточнит детали