CSS puxe para a direita

Houve muitas situações quando você deseja puxar seus dados ou algum elemento HTML para uma direção específica da página HTML. Nesta situação, você pode se sentir desconfortável ao encontrar a propriedade específica para fazê -lo. Mas, a propriedade Float CSS pode ajudá -lo a atingir seu objetivo. Esta propriedade leva a esquerda, a direita e nenhuma atributos para flutuar seu elemento a alguma direção específica sobre a página HTML e outros elementos relacionados do script html. Então, decidimos cobrir alguns exemplos utilizando a propriedade Float para puxar os elementos para a direita e esquerda.

Exemplo 01:

Dentro do nosso primeiro exemplo, usaremos a propriedade Float para puxar os diferentes elementos para a direita, esquerda e nenhum lugar. Além disso, compararemos essas propriedades uma com a outra para uma melhor compreensão. Começamos nosso primeiro exemplo com o formato de documento HTML padrão usado para a criação de qualquer página da web baseada em HTML. A tag principal contém o título da página HTML a ser criada com a ajuda de uma tag "título" interna. Depois disso, temos uma etiqueta de estilo e a tag corporal principal. Antes de olhar para o estilo CSS de uma página HTML, temos que dar uma olhada no corpo que será estilizado. O corpo desta página HTML contém o título simples de tamanho 1 e a tag "div" principal para criar uma seção na página HTML. Esta tag "div" é especificada com a classe "A" para a diferenciação enquanto estiliza. Dentro desta seção, temos mais 3 elementos "div" que são usados ​​aqui.

Todas as três seções da DIV são especificadas com três classes diferentes-flutuante, esquerda, bóia-direita e flutuação. Depois de fechar essas três seções "div", fechamos a seção principal "div" também. O fechamento da seção DIV principal é seguido pela etiqueta "corpo" deste HTML. O corpo e seus elementos a parte agora estão completos. Para fazer com que algumas seções puxem para a direita ou esquerda, precisamos estilizá -las de acordo. Assim, dentro da etiqueta de estilo do código HTML, usamos a classe "A" para a primeira seção "div" para posicioná -la em relação à página HTML através da propriedade "Position".

Além disso, esta seção principal tem 400 pixels de largura e altura com uma borda sólida de 3 pixels na cor marrom. Depois disso, utilizamos as classes flutuantes, a direita e flutuação e as notas flutuantes para as seções internas “div” para modelá-las de acordo. A propriedade Float é usada para a primeira seção interna de div para puxá -la para o direito exato da página HTML. Além disso, esta seção contém largura de 100 pixels, altura de 120 pixels e uma borda pontilhada de 3px em cor azul sólida. O segundo "div" interno está posicionado para parente e puxado para a esquerda da página HTML usando a propriedade Float. Possui largura de 200px, altura de 120px, com a borda verde sólida de 3px. A última seção interna contém uma posição absoluta sem propriedade de tração especificada. Além disso, possui borda marrom sólida de 3px, largura de 100px e altura de 100px. Este código está pronto para ser usado no navegador Chrome através do código do Visual Studio para ver o estilo.

Ao executá -lo dentro do navegador Chrome, obtemos a seguinte saída. A seção DIV principal é exibida com uma borda vermelha sólida e sua posição é relativa à página HTML. Enquanto a seção div de cor azul da borda pontilhada é puxada para a direita com o uso da propriedade "flutuante" no CSS deste código, como mostrado na imagem. A seção DIV de cor verde é puxada para a esquerda usando a propriedade "Float" e é relativa à página HTML. A posição da seção Brown “div” é especificada como relativa e é exibida na imagem.

Exemplo 02:

Vamos começar com outro exemplo de uso da propriedade Float do CSS para puxar os elementos do HTML para a direita ou esquerda. Este código começa com a mesma tag html seguindo a tag "Head" que contém o título para esta página HTML, I I.e. “CSS puxe à direita”. Para adicionar um título para esta página, utilizamos a tag de título. Temos que dar uma boa olhada na seção corporal do nosso script html primeiro. Adicionamos um título ao corpo da página HTML usando a tag "H1", eu.e. título de tamanho grande.

Depois disso, tentamos uma etiqueta de "seção" dentro deste código HTML. Esta tag de seção é usada para criar uma seção dentro do corpo da página HTML. Nesta seção, usamos três novos elementos “div” e um elemento de parágrafo. Ambas as primeiras tags de div utilizam a mesma classe “esquerda”, enquanto a terceira tag de div usa outra classe. As duas primeiras tags de div contêm textos simples dentro delas, enquanto a terceira tag div contém uma imagem "img" tag para adicionar a imagem nesta seção div. A fonte desta imagem é o nosso sistema local e está no formato "jpg". O parágrafo também contém uma linha simples de texto.

Após o final de todas as 3 tags div e a etiqueta do parágrafo, nossa tag de seção terminou aqui com seu fechamento. O corpo desta página HTML está concluído agora. Feche a etiqueta "corpo". Dentro da etiqueta "estilo" deste código HTML para estilo, especificamos o elemento "seção" para estilizar seus elementos internos combinados por vez. O tamanho da seção é definido pelo formato "Borderbox" e contém a borda pontilhada de 5 pixels ao redor. A largura desta seção é de 50 %, enquanto é puxada para a esquerda através da propriedade "Float". Os elementos "div" são estilizados com margem de 5px, largura de 200px e altura de 150px para todos. Os elementos div contendo a classe “esquerda-pull” são exibidos na posição esquerda com o fundo rosa do chá.

Enquanto os elementos da div com a classe “direita-pula” são puxados para a direita com o uso da propriedade “flutuante” e o fundo é definido para a cor do azul-céu quase. Nosso código está concluído e está pronto para uso no código do Visual Studio através do menu "Run" após a opção "Start Debugging".

A saída para este código mostra o cabeçalho simples e uma nova seção pontilhada gerada na página HTML. Esta seção contém três seções DIV diferentes dentro dela. As duas primeiras seções div são puxadas para a esquerda com a cor do fundo rosa do chá. Enquanto a terceira seção div contém uma imagem puxada para a direita desta página HTML.

Conclusão

Discutimos a necessidade e o uso de puxar os elementos na página HTML em nosso parágrafo introdutório. Este artigo mostra uma demonstração muito clara de puxar os elementos CSS para a esquerda, direita ou nenhum através da propriedade "flutuação" do CSS. É usado em todos os exemplos para puxar esses elementos em alguma direção específica com o uso de classes nas seções div. Todos os exemplos abordados neste artigo são bastante simples e fáceis de entender para qualquer usuário de CSS para iniciantes e especialistas.