CSS envolve texto em torno da imagem
Exemplo 1:
Começaremos a escrever o código certo e executá -lo no código do Visual Studio. Para começar, criamos um novo arquivo e escolhemos HTML como o idioma. Agora coloque “!”E acerte a tecla“ Enter ”. Todas as tags necessárias HTML podem ser exibidas aqui. Não teremos que escrever todas essas tags. Depois disso, apenas usamos a tag "Link" na "cabeça" para inserir o nome do arquivo CSS que queremos vincular a este arquivo html. Neste código, primeiro colocamos o título e depois uma div com o nome "quadrado". Dentro desta divisão "quadrado", temos outra div, na qual estamos inserindo a imagem utilizando a tag "img".
Depois de colocar a imagem na segunda div e fechar esta div e gerar um parágrafo abaixo desta div. Quando concluímos este parágrafo e fechamos. Então, fechamos a primeira tag "div". Vamos envolver este texto em torno desta imagem que inserimos. Para o texto de embalagem, iremos ao arquivo CSS, onde usaremos a propriedade "Float" para que o texto de embalagem.
Primeiro, temos que definir a "margem" do corpo para "20px" e também alinhar todo o corpo ao "centro". O título "H1" também é decorado usando "roxo" como a "cor" deste título. Usamos a “família da fonte” e ajustamos-o para “argelino”. Em seguida, estamos utilizando a propriedade "Float" para a imagem que inserimos no código HTML. E defina esse valor de propriedade "flutuante" como "esquerda", assim como a imagem se mover para o lado esquerdo. Também ajustamos a "margem" da imagem para "4px". A "largura" e "altura" desta imagem são "250px". Também temos um parágrafo, então definimos este parágrafo também. Alinhamos o texto do parágrafo e o definimos para "justificar". Definimos o "tamanho da fonte" deste parágrafo e ajustamos-o a "20px". A “família-família” para este parágrafo é “calibri”.
Abaixo está a captura de tela do código acima e você verá que a imagem está flutuando para o lado esquerdo e o texto é embrulhado nesta imagem no lado direito. Enrolamos o texto do parágrafo em torno desta imagem usando a propriedade "Float" no CSS.
Exemplo # 2:
Estamos usando o código HTML do exemplo acima para este exemplo, mas desta vez definiremos a imagem para o lado direito, utilizando a propriedade "Float". Neste código CSS, definimos a margem do corpo como "20px" e a propriedade "Text-Align" é ajustada ao "centro". A "cor" é "verde" para o cabeçalho e a "família da fonte" é "argelino". Além disso, use "decoração de texto" e coloque "sublinhado" como o valor desta propriedade. Estamos flutuando a imagem para a "direita" para que o texto do parágrafo apareça no lado esquerdo desta imagem. A "margem" do "img" é "5px".
Também definimos a "largura" como "190px" e também a "altura" é "90px". Abaixo disso, usamos a propriedade "Text-Align" para o "P" e este "P" está descrevendo o parágrafo. Definimos a propriedade "Text-Align" para a palavra-chave "justificar" e o "tamanho da fonte" para isso é definido como "18px". O “Times New Roman” é utilizado como a “família da fonte”.
Você pode ver na captura de tela abaixo que a imagem aparece no lado direito por causa da propriedade "Float" e o texto está envolvido em torno desta imagem.
Exemplo # 3:
Vamos usar duas imagens diferentes aqui. Colocamos a primeira imagem dentro da div e depois colocamos um parágrafo. Após este parágrafo, novamente inserimos uma imagem dentro de outra div e adicionamos novamente um parágrafo abaixo desta imagem. Ajustaremos o texto em torno de ambas as imagens no código CSS. Veja como embrulharemos o texto em torno das duas imagens no CSS abaixo.
A propriedade "margem" e a propriedade "alinhamento de texto" para o corpo são iguais que usamos nos exemplos acima. A “cor” é alterada para “vermelha” desta vez para o título. A “família da fonte” é selecionada como “argeliana” e também “sublinhe” este título. Estamos definindo a propriedade "Float" para a primeira imagem, mencionando o nome da primeira classe de imagem e definindo a propriedade "Float" para a "direita". A "margem" que estamos usando para a primeira imagem é "5px". Também utilizamos a propriedade "largura" e "altura" e definimos como "200px".
Em seguida, também ajustamos a segunda imagem e "flutuam" esta segunda imagem para a "esquerda" e sua "margem" é a mesma que definimos para a primeira imagem. Agora, "justificamos" este parágrafo e definimos seu "tamanho de fonte" para "17px". "Arial" é utilizado como a "família da fonte" para "P".
Duas imagens são renderizadas na saída. A primeira imagem é renderizada no lado "esquerdo" e a segunda imagem é renderizada no lado "direito" da tela de saída e todo o texto é envolvido em torno das duas imagens.
Exemplo # 4:
Em nosso último exemplo, colocamos um parágrafo e depois uma div. Dentro deste recipiente de div, inserimos uma imagem e um parágrafo também. Agora, veja como utilizamos todos esses parágrafos e ajustamos a imagem e também embrulhe o texto em torno da imagem.
Estamos usando valores "20px" "margem" e "centro" para "text-align" para o corpo. Em seguida, definimos a cor como "marrom" para o cabeçalho e a fonte, "argelino"-família. Nós também "sublinhamos" o título. Definimos a propriedade "Float" para a imagem especificando o nome da classe de imagem e definindo a propriedade "Float" para "Esquerda". Para esta imagem, a "margem" que estamos usando é "5px". A "largura" desta imagem é "300px" e sua "altura" é "300px".
Agora, estamos aplicando algumas propriedades ao parágrafo para torná -lo mais atraente. Definimos a "cor" do texto do parágrafo para "preto". Também definimos a propriedade alinhada do texto para "justificar" e definir "18px" para o "tamanho da fonte". Também ajustamos o “Times New Roman” “font-família” para o parágrafo.
Você pode notar que há um parágrafo acima da imagem, um parágrafo abaixo da imagem, um texto de parágrafo no lado direito da imagem, e a imagem está flutuando para o lado esquerdo. O texto do parágrafo envolve esta imagem porque definimos isso no código CSS.
Conclusão
O foco deste artigo é explicar como envolver o texto em torno da imagem no CSS. Estudamos esse conceito em profundidade neste artigo e explicamos o que está envolvendo o texto e o que devemos fazer para envolver o texto em torno da imagem. Usamos a propriedade "Float" para flutuar a imagem para "esquerda" ou "direita" e embrulhar o texto em torno desta imagem. Também incluímos vários exemplos aqui nos quais envolvemos o texto em torno da imagem, incluindo os resultados de todos os exemplos do artigo. Espero que você tenha um bom entendimento do texto de envoltório em torno do conceito de imagem no CSS depois de ler este artigo e aplicar esses exemplos em prática por conta própria.