Como posicionar texto ao redor de imagens com CSS

Posicionar os textos ao redor de imagens é uma técnica importante que melhora a estética e a legibilidade. Neste post, vamos explorar como posicionar texto ao redor de imagens com CSS, facilitando a criação de layouts harmoniosos e atraentes.

1. Estrutura HTML básica

Para começar, você precisa de uma estrutura HTML que inclua uma imagem e o texto que a acompanhará. Veja um exemplo simples:

<div class="container">
    <img src="sua-imagem.jpg" alt="Descrição da imagem" class="imagem">
    <p>Este é um parágrafo de texto que flui ao redor da imagem. O uso de CSS permite ajustar o posicionamento e o espaçamento para garantir que o layout fique bonito e organizado.</p>
</div>

2. Usando CSS para posicionar o texto

Agora, vamos aplicar estilos CSS para que o texto flua ao redor da imagem. Usaremos a propriedade float para isso:

.container {
    width: 80%; /* Largura do container */
    margin: 0 auto; /* Centraliza o container */
}

.imagem {
    float: left; /* Faz a imagem flutuar à esquerda */
    margin-right: 15px; /* Espaço entre a imagem e o texto */
    width: 30%; /* Largura da imagem */
}

3. Explicação do código

• float: left; – Faz com que a imagem fique à esquerda, permitindo que o texto flua ao seu redor.
  
  
• margin-right: 15px; – Adiciona um espaço à direita da imagem, evitando que o texto grude na imagem.
  
  
• width: 30%; – Define a largura da imagem, ajustando-a em relação ao seu container.

4. Limpar flutuações

Após flutuar elementos, é importante limpar a flutuação para que outros elementos do layout não sejam afetados. Para isso, você pode usar o seguinte:

.container::after {
    content: "";
    display: table;
    clear: both;
}

5. Exemplo completo

Veja um exemplo completo que combina tudo:

HTML

<div class="container">
    <img src="sua-imagem.jpg" alt="Descrição da imagem" class="imagem">
    <p>Este é um parágrafo de texto que flui ao redor da imagem. O uso de CSS permite ajustar o posicionamento e o espaçamento para garantir que o layout fique bonito e organizado.</p>
    <p>Adicionar mais conteúdo aqui demonstra como o texto se comporta em relação à imagem. Ao usar o float, o texto se adapta naturalmente ao redor da imagem, criando uma apresentação visualmente agradável.</p>
</div>

CSS

.container {
    width: 80%;
    margin: 0 auto;
}

.imagem {
    float: left;
    margin-right: 15px;
    width: 30%;
}

.container::after {
    content: "";
    display: table;
    clear: both;
}

Outro exemplo prático

No passado, o posicionamento de texto ao redor de imagens era feito através do uso de tabelas, onde a imagem e textos eram colocados em células vizinhas. Hoje usamos CSS para realizar esse mesmo trabalho.

Código HTML:

<img src="imagem.jpg" alt="Criandobits" />
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
architecto beatae vitae dicta sunt explicabo.
</p>

Código CSS:

img {
	float:left;
	margin:0 10px 10px 0;
}

No código CSS acima definimos “float:left” para que a imagem fique alinhada a esquerda e o texto flua a direita. Para que o texto não fique colado na imagem, definimos valores para “margin”.

Se você deseja que a imagem fique a direita do texto, defina “float: right”. 

Posicionar texto ao redor de imagens com CSS é uma maneira eficaz de criar layouts dinâmicos e envolventes.

Lembre-se de limpar a flutuação para que outros elementos do layout não sejam afetados.

Com o uso de float e as propriedades corretas, você pode garantir que seus textos e imagens se apresentem de maneira harmônica. Experimente diferentes combinações para encontrar o estilo que mais se adequa ao seu projeto!

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: posicao imagem css