Como criar: layout de três colunas

Como criar um layout de três colunas

Primeiro passo - Adicionar HTML:

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

Segundo passo - Adicionar CSS:

Neste exemplo, criaremos trêsigualcolunas:

Exemplo

.column {
  float: left;
  width: 33.33%;
}
/* Limpar a flutuação após as colunas */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Experimente pessoalmente

Neste exemplo, criaremos trêsnão iguaiscolunas:

Exemplo

.column {
  float: left;
}
.left, .right {
  width: 25%;
}
.middle {
  width: 50%;
}

Experimente pessoalmente

Neste exemplo, criaremos umResponsivoLayout de três colunas:

Exemplo

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

Experimente pessoalmente

Páginas relacionadas

Tutorial:Layout de site CSS

Tutorial:Design de site responsivo CSS