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. Todas as minhas postagens anteriores são um exemplo disso, ou seja, texto, imagem, texto, etc.
Às vezes, é possível incluir texto ao lado de uma imagem, em vez de abaixo dela. Isso é chamado de quebra de texto ao redor da imagem. Na verdade, é bem 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 usar CSS em vez de HTML para esses tipos de tarefas. Mencionarei os dois métodos abaixo, mas, se possível, é melhor usar CSS, pois ele é mais adaptável a designs responsivos de websites.
Quebra de texto em torno da imagem usando HTML
Lorem ipsum dolor sit 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 colocar o texto no lado direito da imagem, é necessário alinhar a imagem à esquerda:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Se você quiser que o texto apareça à esquerda e a imagem apareça na extrema direita, basta alterar o parâmetro align para “right”.
Lorem ipsum dolor sente-se, consetetur 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.
4
É isso! 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:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
O código acima usa o elemento MARGIN CSS para adicionar 10 pixels de espaço em branco no lado direito da imagem. Uma vez que alinhamos a imagem à esquerda, queremos adicionar o espaço em branco à direita.
Basicamente, os quatro números representam a PARTE SUPERIOR DA PARTE DIREITA SUPERIOR. Então, se você quiser adicionar o espaço em branco a uma imagem alinhada à direita, você faria isso:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Portanto, é bastante simples usar HTML para executar essa tarefa, mas uma vez novamente, pode não funcionar bem para sites responsivos.
Quebra de texto ao redor da imagem usando CSS
A melhor maneira de envolver texto em uma imagem é usar CSS. Ele oferece mais controle sobre o posicionamento dos elementos e funciona melhor com os modernos padrões de codificação.
7
Embora eu tenha incluído o CSS diretamente na tag de imagem no exemplo HTML , você realmente nunca deveria 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 classe esquerda. Na minha folha de estilo, tudo o que tenho que fazer é adicionar o código a seguir:
.left {
float: left;
padding: 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 para a tag IMG em si. 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. Aproveite!