Cómo crear: diseño de cuatro columnas

Cómo crear un diseño de cuatro columnas

Primer paso - Añadir HTML:

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

Segundo paso - Añadir CSS:

En este ejemplo, crearemos un diseño de cuatro columnas:

Ejemplo

.column {
  float: left;
  width: 25%;
}
/* Eliminar el flotamiento después de las columnas */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Prueba personalmente

En este ejemplo, crearemos unaResponsiveDiseño de cuatro columnas:

Ejemplo

/* Diseño responsive - cuando el ancho de la pantalla es menor de 600px, los tres columnas se apilan en lugar de estar alineadas */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prueba personalmente

Páginas relacionadas

Tutoriales:Diseño de sitio web CSS

Tutoriales:Diseño web responsivo CSS