Como criar colunas utilizando a tag DIV

Escrito por randall shatto | Traduzido por lucas irineu
Como criar colunas utilizando a tag DIV
Colunas feitas com tags DIV

A tags DIV possuem um grande números funções, maior do que as demais tags HTML. Você pode criar um site versátil utilizando esta ferramenta. Tabelas HTML comuns são difíceis de montar, e não são tão flexíveis. Tags DIV são parte de um documento HTML. Você as adiciona quando precisa colocar colunas dentro de seu site. Depois de ter a cor ou textura de fundo em seu documento, coloque as tags DIV para criar as colunas.

Instruções

  1. 1

    Adicione o código “<div style=’” para cada linha separada das colunas. Isso responde o propósito do código inicial.

  2. 2

    Insira a altura, o comprimento e a largura em pixels da borda. Este código irá aparecer até então como “<div style=’ height: 550px; width: 220px; border: 3px”. Se você não quiser uma borda em volta de sua coluna, coloque zero pixels.

  3. 3

    Defina a cor da borda. Você pode usar a mesma cor, ou cores diferentes. Use "Solid" ou "Double" para o tipo da borda. Seu código agora será parecido com “<div style='height: 550px; width: 220px; border: 3px solid black;”.

  4. 4

    Adicione o alinhamento. O comando "Float" permite que colunas adicionais se alinhem com a primeira. Insira "float: (direction);" para a tag DIV de alinhamento. O código até o momento é “<div style='height: 550px; width: 220px; border: 3px solid black; float: left;” .

  5. 5

    Feche a tag DIV. Faça isso com ">" e termine com "

    ". Por exemplo, o código inteiro está como “
    ”.

  • 6

    Adicione outra coluna ao lado da primeira com outra tag DIV. Por exemplo, se quiser quatro colunas em uma linha, este seria o código:

  • Dicas & Advertências

    • Explore os diferentes atributos DIV para colunas e estilos diversos.
    Filtro:
    • Geral
    • Artigos
    • Slides
    • Vídeos
    Mostrar:
    • Mais relevantes
    • Mais lidos
    • Mais recentes

    Nenhum artigo disponível

    Nenhum slide disponível

    Nenhum vídeo disponível