Skip to content
› Computer Science

Como fazer uma imagem flutuar à direita do texto

5 de junho de 2021

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. Manipular imagens é semelhante a manipular texto, portanto, se você tiver experiência com o último, esse processo não deve ser difícil. Na verdade, com a propriedade float do 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.

  1. 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.

  2. Dê a esse novo div duas classes, container e clearfix. Existem várias 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.

  3. 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;
    }

  4. 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;
    }

  5. 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.

  6. 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.
    }

  7. 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.

  8. 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.

Formato mla apa chicago Sua Citação

Kyrnin, Jennifer. “Como fazer uma imagem flutuar à direita do texto.” ThoughtCo, maio. 14 de 2021, thinkingco.com/float-image-to-right-of-text-3466409.
Kyrnin, Jennifer. (2021, 14 de maio). Como fazer uma imagem flutuar à direita do texto. Obtido em https://www.thoughtco.com/float-image-to-right-of-text-3466409
Kyrnin, Jennifer. “Como fazer uma imagem flutuar à direita do texto.” ThoughtCo. https://www.thoughtco.com/float-image-to-right-of-text-3466409 (acessado em 5 de junho de 2021).

Recomendado: Como envolver o texto em uma imagem