Cómo crear: Diseño de tres columnas

Cómo crear un diseño de tres columnas

Primer paso - Añadir HTML:

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

Segundo paso - Añadir CSS:

En este ejemplo, crearemos tresIguales anchosColumnas:

Ejemplo

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

Prueba personalmente

En este ejemplo, crearemos tresDiferentes anchosColumnas:

Ejemplo

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

Prueba personalmente

En este ejemplo, crearemos unaResponsivoDiseño de tres columnas:

Ejemplo

/* Diseño responsivo - cuando el ancho de la pantalla es menor de 600px, los tres columnas se apilan en lugar de alinearse en paralelo */
@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