Como

Código HTML para envolver o texto em torno da imagem

Código HTML para envolver o texto em torno da imagem

Precisa do código para envolver o texto em torno de uma imagem? Normalmente, quando você cria uma página HTML, tudo flui linearmente, o que significa um bloco logo após o outro. Todas as minhas postagens anteriores são um exemplo disso, eu.e. texto, então imagine, depois texto, etc.

Às vezes, você pode querer incluir texto ao lado de uma imagem em vez de abaixo dela. Isso é chamado de texto de embrulho em torno da imagem. Na verdade, é bastante fácil envolver o texto usando HTML. Observe que você não precisa usar CSS para envolver o texto.

Índice

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis penatibus etagnis dis Parturient Montes, Nascetur ridiculus mus. Aliquam A Felis Vitae Augue Lobortis Dictum. Curabitur Molestie Posuere Laoreet. Ut PellentSque Nunc em Lorem Egestas Non Imperdiet Enim Congue.

    Para que o texto envolva no lado direito da imagem, você deve alinhar a imagem à esquerda:

     
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis penatibus etagnis dis Parturient Montes, Nascetur ridiculus mus. Aliquam A Felis Vitae Augue Lobortis Dictum. Curabitur Molestie Posuere Laoreet. Ut PellentSque Nunc em Lorem Egestas Non Imperdiet Enim Congue.
     
     
    Embora eu tenha incluído o CSS diretamente na tag de imagem no exemplo html, você realmente nunca deve fazer mais isso. Em vez disso, você deve ter um arquivo separado chamado uma folha de estilo que contém todo o seu código CSS.
     
    Na tag IMG, basta atribuir uma classe à tag e dar um nome. No meu exemplo, nomeei a classe esquerda. Na minha folha de estilo, tudo o que tenho a fazer é adicionar o seguinte código:
     
    .Esquerda float: esquerda; preenchimento: 0 10px 0 0;
     
    Como você pode ver, adicionei 10px de preenchimento ao lado direito da imagem alinhada à esquerda. Eu também usei a propriedade Float para mover a imagem para fora do fluxo normal do documento e colocá -la no lado esquerdo do contêiner pai.
     
    Como você pode ver, é muito mais limpo do que adicionar todo esse código à própria tag IMG. Também é mais fácil de gerenciar e você pode usar muito mais propriedades CSS para personalizar a aparência em sua página da web. Se você tiver alguma dúvida, fique à vontade para comentar. Aproveitar!