Como colocar texto do lado da imagem

Question

Accepted Answer

Para colocar texto ao lado de uma imagem em HTML e CSS, você pode usar diferentes abordagens. Aqui está um método comum usando CSS para criar um layout com imagem e texto lado a lado: ### Usando CSS Flexbox 1. **HTML**: Estruture o HTML com uma `div` que contenha tanto a imagem quanto o texto. ```html

Este é o texto que ficará ao lado da imagem.

``` 2. **CSS**: Utilize o Flexbox para alinhar a imagem e o texto lado a lado. ```css .container { display: flex; align-items: center; /* Alinha verticalmente ao centro */ } .imagem { max-width: 50%; /* Ajuste conforme necessário */ height: auto; /* Mantém a proporção da imagem */ margin-right: 20px; /* Espaçamento entre a imagem e o texto */ } .texto { max-width: 50%; /* Ajuste conforme necessário */ } ``` ### Usando CSS Float Outra abordagem é usar a propriedade `float`, embora o Flexbox seja geralmente mais moderno e flexível. 1. **HTML**: A estrutura HTML permanece a mesma. 2. **CSS**: Use `float` para alinhar a imagem à esquerda ou à direita. ```css .imagem { float: left; /* Ou float: right; para alinhar à direita */ max-width: 50%; height: auto; margin-right: 20px; /* Espaçamento entre a imagem e o texto */ } .texto { overflow: hidden; /* Garante que o texto flua corretamente ao lado da imagem */ } ``` Esses métodos devem ajudar a posicionar o texto ao lado de uma imagem em uma página web. Ajuste os valores de largura e margens conforme necessário para se adequar ao seu design específico.