Como criar: layout de duas colunas

Como criar um layout de duas colunas

Primeiro passo - Adicionar HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

Segundo passo - Adicionar CSS:

Neste exemplo, criaremos duas colunas iguais:Igualdas colunas:

Exemplo de flutuabilidade

.column {
  float: left;
  width: 50%;
}
/* Limpar a flutuabilidade após as colunas */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Experimente por si mesmo

A maneira moderna de criar um layout de duas colunas é usar o CSS Flexbox. No entanto, ele não é compatível com versões do Internet Explorer 10 ou anteriores.

Exemplo de Flex

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Experimente por si mesmo

Você pode escolher usar flutuante ou flex para criar um layout de duas colunas. No entanto, se você precisar suportar versões do IE10 ou anteriores, use flutuante.

Dica:Para obter mais informações sobre o módulo de layout de caixa flexível, leia nosso Tutorial de CSS Flexbox。

Neste exemplo, criaremos duas colunas de largura desiguais:

Exemplo

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Experimente por si mesmo

Neste exemplo, criaremos umaResponsivoLayout de duas colunas:

Exemplo

/* Layout responsivo - Quando a largura da tela for menor que 600px, os dois colunas ficam empilhadas, em vez de lado a lado */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Experimente por si mesmo

Páginas relacionadas

Tutorial:Layout de site CSS

Tutorial:Design de página web responsiva CSS