Se você estiver interessado em aprender como fazer uma imagem flutuar à direita do texto, é uma tarefa bastante simples. Existem 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 enrolado nele. Manipulando imagens é semelhante à manipulação de texto, portanto, se você tiver experiência com o último, esse processo não deve ser difícil.
Na verdade, com a propriedade float CSS, é fácil fazer sua imagem flutuar à direita do texto e fazer com que o texto flua ao redor dela no lado esquerdo. Use este tutorial de cinco minutos para aprender como.
Configurando um Layout com Flutuador
Este layout básico criará um espaço para o seu texto e fará uma imagem flutuar à direita desse texto. Certamente, esses layouts podem ficar mais complicados, mas este exemplo mostrará o princípio básico por trás do trabalho com float e texto.
Supondo que você já tenha um documento HTML com o qual está trabalhando e uma folha de estilo CSS separada, comece criando um novo div para atuar como a linha que contém seu elemento flutuante.
Dê a esse novo div duas classes, container e clearfix. Existem muitas maneiras de lidar com isso e os nomes são inteiramente sua escolha, mas eles irão ajudá-lo a se manter organizado e estabelecer seu layout.
-
Em seu CSS, defina como deseja que seu contêiner se ajuste ao layout geral. Este exemplo vai apenas torná-lo uma linha de largura total.
.container {
largura: 100%;
altura: 25 rem;
} -
Em seguida, cuide da classe clearfix. O clearfix é necessário porque float pode criar algumas falhas estranhas em seu layout. Definir a propriedade "overflow" no clearfix impede que os elementos flutuados vazem de seu espaço designado.
.clearfix {
estouro: automático;
} -
Agora, você pode criar um elemento dentro do div do contêiner e colocá-lo à direita. Se você estiver envolvendo um texto em uma imagem, esta será a sua imagem. Crie o elemento e atribua a ele uma classe para a propriedade float.
-
Crie a classe para o seu float. Você provavelmente vai querer adicionar algum estilo lá também, se for fazer elementos mais idênticos. Caso contrário, você pode aplicar uma classe separada para o seu estilo.
.float-right {
flutuar: certo;
largura: 300px;
altura: 200px;
cor de fundo: vermelho;
margem: 0 0 0,5 rem. 0,5 rem.
} -
Se você deseja quebrar o texto em torno desse elemento flutuante, insira seu texto agora. Coloque-o em qualquer lugar do recipiente, antes ou depois do elemento flutuante.
Algum texto
Mais texto
...e assim por diante.
-
Atualize sua página e verifique o resultado.
Empacotando
E é isso. Agora você vê que flutuar 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.