Como alinhar DIVs horizontalmente em CSS

Escrito por ameen aliyar | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alinhar DIVs horizontalmente em CSS
As etiquetas "div" em HTML eliminam a necessidade de usar tabelas para o layout das páginas (Comstock/Comstock/Getty Images)

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.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto

Lista completaMinimizar

Instruções

    Definir as posições absolutas das etiquetas div

  1. 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.

  2. 2

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

    <div class="halign">First div</div> <div class="halign">Second div</div> <div class="halign">Third div</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. 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:

    <div id="box1" class="halign">First div</div> <div id="box2" class="halign">Second div</div> <div id="box3" class="halign">Third div</div>

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

  4. 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. 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. 1

    Abra o arquivo CSS no editor de texto.

  2. 2

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

  3. 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. 4

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

  5. 5

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

    <div style="clear: both;"></div>

Dicas & Advertências

  • 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.
  • 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.

Não perca

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