Как создавать изображения, которые выровнены по правому краю на веб-странице

Используя свойства float CSS, вы можете перемещать любое изображение справа от любого текста, как это видно на изображении справа от этого текста. Чтобы сделать это на своей веб-странице, выполните следующие действия.

В этом примере мы будем использовать внешний файл CSS. Используя внешний файл CSS, вы можете создать плавающее изображение на любой странице, содержащей ссылку на файл CSS. Внешние CSS-файлы также упрощают изменение любых настроек, которые вы, возможно, захотите изменить в будущем.

1. Создайте файл CSS. Если у вас уже есть файл CSS для вашей веб-страницы, отредактируйте файл CSS и добавьте следующий код.

2. Добавьте следующий код в файл CSS.

 .floatRight {поплавок: правый; рентабельность левый: 20px} 

Совет: Добавление float: left заставит изображение плавать с левой стороны текста.

Если вы хотите, чтобы несколько изображений плавали справа, также добавьте следующую строку в файл CSS.

 .floatRightClear {поплавок: право, ясно: право; маржа налево: 20px} 

3. После создания вышеуказанного кода сохраните файл CSS и вызовите его с каждой HTML-страницы, используя код, подобный примеру ниже. В нашем примере мы назвали CSS-файл style.css.

4. Наконец, добавьте к любому изображению, которое вы хотите разместить с правой стороны контейнера.