×
Loading ...

Como alinhar DIVs horizontalmente em CSS

As etiquetas "div" em HTML definem o layout das páginas web. As folhas de estilos em cascata são usadas para estilizar as etiquetas HTML dentro das páginas. As propriedades "id" e "class" são usadas em CSS para aplicar certos estilos. Aqueles estilos comuns a várias etiquetas "div" podem ser definidos em um "class", mas os estilos únicos devem ser definidos com a propriedade "id" da etiqueta "div" particular, pois essa propriedade pode ser usada apenas uma vez. Um elemento "div" adjacente aparecerá embaixo do elemento "div" anterior, a menos que se aplique um estilo que os alinhe horizontalmente.

Instruções

As etiquetas "div" em HTML eliminam a necessidade de usar tabelas para o layout das páginas (Comstock/Comstock/Getty Images)

    Definir as posições absolutas das etiquetas div

  1. Abra a página HTML e o arquivo CSS associado em duas janelas diferentes de um editor de HTML ou de texto básico, como o Bloco de notas.

    Loading...
  2. Localize todas as etiquetas "div" que serão alinhadas e crie uma classe "halign" única:

    First div

    Second div
    Third div

    Se "halign" já tiver sido usado como nome de classe em outra parte do HTML, use outro e certifique-se de que seja único.

  3. Dê nomes "id" a todos os elementos "div" que precisarem ser alinhados. Inclua números dentro dos nomes para identificar a ordem de colocação. Por exemplo, use os nomes "box1", "box2" e assim por diante:

    First div

    Second div
    Third div

    Anote os nomes "id" que já tiverem sido utilizados.

  4. Abra o arquivo CSS e insira o seguinte:

    .halign { position: absolute; top: XXX; }

    Substitua "XXX" pelo valor de margem entre o topo absoluto e a linha de alinhamento horizontal. Use valores de pixels ou porcentagens, dependendo dos outros elementos "div" que estiverem colocados em cima da classe "halign".

  5. Edite os blocos de estilo "div" individuais em CSS. Localize os nomes "id" no código e adicione a linha de código "left: YYY" dentro de cada bloco, substituindo "YYY" pelos valores absolutos das margens esquerdas dos elementos. A "margem absoluta" é o espaço que haverá entre a borda da tela do navegador e o div correspondente. As margens terão valores maiores para colocar os "div" lado a lado:

    box1 { margin-left:100px; }

    box2 { margin-left:400px; }

    box3 { margin-left:700px; }

    Fazer flutuar os elementos DIV

  1. Abra o arquivo CSS no editor de texto.

  2. Defina um nome "class" único, como por exemplo "halign", insira "float:left;" no bloco de código e salve o arquivo.

  3. Abra o HTML em uma nova janela do editor de texto e certifique-se de que todos os elementos que precisarem ser alinhados estejam adjacentes.

  4. Conecte o nome de classe "halign" aos elementos "div" adjacentes que precisarem ser alinhados.

  5. Coloque o seguinte código em cima do grupo de elementos "div" em HTML:

Loading...

Dicas

  • Se algum nome de classe tiver sido usado em algum dos divs em questão, insira nomes de classes adicionais e separe-os com um caractere de espaçamento. Use porcentagens para os valores de margens e espaços se a página web tiver uma largura fluida, para que os tamanhos dos blocos e margens sejam alterados automaticamente de acordo com o tamanho e resolução da tela. Os elementos de design em páginas web de largura fixa não são adaptáveis ao tamanho ou resolução da tela, e os valores em pixels são apropriados para as margens.

Aviso

  • Alguns códigos CSS produzem comportamentos únicos nos diferentes navegadores. Teste a compatibilidade de todo o código CSS e HTML. Não testar isto pode reduzir a acessibilidade e usabilidade da página web.

O que você precisa

  • Editor de texto

Referências

Recursos

Loading ...
Loading ...