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

логотип

Используя свойства 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. Наконец, добавьте class = «floatRight» к любому изображению, которое вы хотите разместить на правой стороне контейнера.

Ссылка на основную публикацию