Se você estiver interessado em aprender como posicionar uma imagem à direita do texto, ficará feliz em saber que é uma tarefa bastante simples. Há muitas situações em que os programadores desejam que uma imagem em uma página da Web apareça dentro do texto com o texto fluindo ou em volta dele. Felizmente, a manipulação de imagens é semelhante à manipulação de texto, portanto, se você tiver experiência com o último, esse processo não será nada difícil.
Na verdade, com a propriedade float CSS, é fácil flutuar sua imagem à direita do texto e fazer com que o texto flua em torno dele no lado esquerdo. Use este tutorial de cinco minutos para aprender como.
Começando
Para começar, escreva um parágrafo de texto e adicione uma imagem no início do parágrafo. Isso deve ser feito antes do texto, mas após o
tag):
Em seguida, adicione um atributo de estilo à imagem e aplique a propriedade float:
Seu texto será pressionado contra a imagem, então adicione algumas margens à imagem para facilitar a leitura:
A propriedade shorthand de margem aplica margens na ordem superior, direita, inferior e esquerda (TRBL). E isso faz. Agora você vê que a flutuação de uma imagem para a direita não é nada difícil. Você também pode estar interessado em flutuar uma imagem para a esquerda e flutuá-la para o centro. Embora o primeiro movimento seja possível, infelizmente, você não pode flutuar uma imagem para o centro, pois isso normalmente exigiria um layout de duas colunas.
Empacotando
