Como criar imagens alinhadas à direita em uma página da web

Usando as propriedades de flutuação do CSS, você pode “flutuar” qualquer imagem para que fique de lado e o texto flua ao redor dela. Para fazer isso em sua página da web, siga as etapas abaixo.

Criar imagem alinhada à direita

Em nosso exemplo abaixo, estamos usando um arquivo CSS externo. Usando um arquivo CSS externo, você pode criar uma imagem flutuante em qualquer página que inclua um link para o arquivo CSS. Os arquivos CSS externos também tornam mais fácil alterar quaisquer configurações que você queira ajustar no futuro.

Crie um arquivo CSS ou edite o arquivo CSS existente.
Adicione o seguinte código ao arquivo CSS.

.floatRight{float:right;margin-left:20px}

Gorjeta

Adicionar float: left faria a imagem flutuar no lado esquerdo do texto.

Se você quiser ter mais de uma imagem flutuando à direita, adicione também a seguinte linha ao arquivo CSS.

.floatRightClear{float:right;clear:right;margin-left:20px}

Depois que o código acima for adicionado, salve o arquivo CSS e chame-o de cada página HTML usando um código semelhante ao exemplo abaixo. Em nosso exemplo, chamamos o arquivo CSS de style.css.

<link rel="stylesheet" href="style.css" Type="text/css" media="all">

Adicione class = “floatRight” a qualquer imagem que você deseja flutuar no lado direito do contêiner.

<img src="https://www.computerhope.com/logo.gif" class="floatRight">