Cómo alinear imágenes en paralelo

Aprende cómo alinear imágenes en paralelo usando CSS.

Cómo alinear imágenes

Primer paso - Añadir HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Nieve" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Bosque" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Montañas" style="width:100%">
  </div>
</div>

Segundo paso - Añadir CSS:

Cómo usar CSS flotar Atributos para crear imágenes alineadas:

Ejemplo de flotación

/* Tres contenedores de imágenes (cuatro imágenes utilizan 25%, dos imágenes utilizan 50%, etc.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Eliminar el flotamiento después del contenedor de imágenes */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Prueba por tu cuenta

Cómo usar CSS flex Atributos para crear imágenes alineadas:

Ejemplo de cuadro flexible

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

Prueba por tu cuenta

Nota:Flexbox no es compatible con Internet Explorer 10 y versiones anteriores. La decisión de usar float o flex para crear un diseño de tres columnas depende de usted. Sin embargo, si necesita soportar IE10 y versiones anteriores, debe usar flotación.

Consejo:Para obtener más información sobre el módulo de diseño flexible, lea nuestra Tutoriales de CSS Flexbox.

Agregar capacidad de respuesta

O, puede agregar consultas de medios para que las imágenes se apilen en un ancho de pantalla específico en lugar de alinearse.

El siguiente ejemplo apilará verticalmente las imágenes en pantallas de ancho de 500px o menos:

Ejemplo de diseño responsivo

/* Diseño responsivo - hace que las tres columnas se apilen en lugar de alinearse */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Prueba por tu cuenta

Para obtener más información sobre las consultas de medios, lea nuestra Tutoriales de CSS Media Queries.

Páginas relacionadas

Tutoriales:CSS imagen

Tutoriales:CSS Flotante

Tutoriales:biblioteca de imágenes CSS