Precisa do código para envolver o texto em torno de uma imagem? Normalmente, quando você cria uma página HTML, tudo flui linearmente, ou seja, um bloco diretamente após o outro. Todos os meus posts anteriores são um exemplo disso, ou seja, texto, imagem, texto, etc.
Às vezes você pode querer incluir texto ao lado de uma imagem em vez de abaixo dela. Isso é chamado de quebra de texto ao redor da imagem. Na verdade, é bastante fácil envolver o texto usando HTML. Note que você não precisa usar CSS para quebrar o texto.
No entanto, atualmente, o W3C recomenda o uso de CSS em vez de HTML para esses tipos de tarefas. Mencionarei os dois métodos abaixo, mas, se puder, é melhor usar CSS, pois é mais adaptável a designs responsivos de websites.
Enrole o texto em torno da imagem usando HTML
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus e magnis parturient partes, nascetur ridiculus mus. Aliquam um felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
Para que o texto seja colocado no lado direito da imagem, você precisa alinhar a imagem à esquerda:
Seu texto vai aqui.
Se você quiser que o texto apareça à esquerda e a imagem apareça na extrema direita, basta alterar o parâmetro de alinhamento para "direito".
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus e magnis parturient partes, nascetur ridiculus mus. Aliquam um felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
Seu texto vai aqui.
É isso aí! Muito fácil né? A única vez que você gostaria de usar CSS é se você deseja adicionar margens às imagens, para que haja algum espaço entre o texto e a imagem.
Você pode adicionar margens a uma imagem usando o seguinte código de estilo CSS:
Seu texto vai aqui.
O código acima usa o elemento MARGIN CSS para adicionar 10 pixels de espaço em branco no lado direito da imagem. Como alinhamos a imagem à esquerda, queremos adicionar o espaço em branco à direita.
Basicamente, os quatro números representam a PARTE SUPERIOR DIREITA ESQUERDA. Então, se você quiser adicionar o espaço em branco a uma imagem alinhada à direita, você faria isso:
Seu texto vai aqui.
Portanto, é bastante simples usar HTML para executar essa tarefa, mas, mais uma vez, pode não funcionar bem para sites responsivos.
Enrole o texto em torno da imagem usando CSS
A melhor maneira de envolver o texto em uma imagem é usar CSS. Ele oferece um controle mais fino sobre o posicionamento dos elementos e funciona melhor com os modernos padrões de codificação.
Mesmo que eu inclua CSS diretamente na tag de imagem no exemplo HTML, você realmente nunca deve fazer isso também. Em vez disso, você deve ter um arquivo separado chamado folha de estilo que contém todo o seu código CSS.
Na tag IMG, basta atribuir uma classe à tag e atribuir um nome a ela. No meu exemplo, eu nomeei a turma à esquerda . Na minha folha de estilo, tudo o que tenho que fazer é adicionar o seguinte código:
.left {float: esquerda; preenchimento: 0 10px 0 0;} Como você pode ver, adicionei 10px de preenchimento ao lado direito da imagem alinhada à esquerda. Eu também usei a propriedade float para mover a imagem para fora do fluxo normal do documento e colocá-la no lado esquerdo do contêiner pai.
Como você pode ver, é muito mais limpo do que adicionar todo esse código à própria tag IMG. Também é mais fácil de gerenciar e você pode usar muito mais propriedades CSS para personalizar a aparência da sua página da web. Se você tiver alguma dúvida, fique à vontade para comentar. Apreciar!
