Como alinhar imagens ao lado

Aprenda como alinhar imagens ao lado usando CSS.

Como exibir imagens lado a lado

Primeiro Passo - Adicionar HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Neve" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Floresta" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Montanhas" style="width:100%">
  </div>
</div>

Segundo Passo - Adicionar CSS:

Como usar CSS flutuante Atributos para criar imagens lado a lado:

Exemplo de Flutuamento

/* Três contêineres de imagens (quatro contêineres de imagens usam 25%, dois contêineres de imagens usam 50%, e assim por diante) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Limpar flutuamento após o contêiner de imagens */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Experimente por conta própria

Como usar CSS flex Atributos para criar imagens lado a lado:

Exemplo de Flexbox

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

Experimente por conta própria

Atenção:O Flexbox não é compatível com o Internet Explorer 10 e versões anteriores. A decisão de usar float ou flex para criar um layout de três colunas depende de você. No entanto, se você precisar suportar versões do IE10 ou anteriores, você deve usar float.

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

Adicionar Responsividade

Ou você pode adicionar consultas de mídia para empilhar as imagens em uma largura de tela específica em vez de exibi-las lado a lado.

O exemplo a seguir empilha verticalmente as imagens em tela com largura de 500px ou menor:

Exemplo Responsivo

/* Layout responsivo - empilha três colunas em vez de exibi-las lado a lado */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Experimente por conta própria

Para obter mais informações sobre consultas de mídia, leia nossa Tutorial de CSS Media Queries.

Páginas Relacionadas

Tutorial:CSS imagem

Tutorial:CSS Flutuante

Tutorial:CSS biblioteca de imagens