Como usar CSS para flutuar uma imagem para a direita

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.

  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.

    instagram viewer

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

  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.

    Elemento CSS flutuou para a direita

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.