Cómo crear: diseño de dos columnas

Cómo crear un diseño de dos columnas

Primer paso - Añadir HTML:

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

Segundo paso - Añadir CSS:

En este ejemplo, crearemos dosIgualde las columnas:

Ejemplo de flotación

.column {
  float: left;
  width: 50%;
}
/* Quitar la flotación después de las columnas */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Prueba por ti mismo

La forma moderna de crear dos columnas es utilizando CSS Flexbox. Sin embargo, no es compatible con Internet Explorer 10 y versiones anteriores.

Ejemplo de Flex

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Prueba por ti mismo

Puedes elegir usar flotación o flex para crear un diseño de dos columnas. Sin embargo, si necesitas soporte para IE10 y versiones anteriores, debes usar flotación.

Consejo:Para obtener más información sobre el módulo de Layout de Flexbox, lea nuestros Tutoriales de CSS Flexbox。

En este ejemplo, crearemos dos columnas de ancho desigual:

Ejemplo

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Prueba por ti mismo

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

Ejemplo

/* Diseño de layout responsivo - Cuando el ancho de la pantalla sea menor de 600px, las dos columnas se apilarán en lugar de estar alineadas en paralelo */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prueba por ti mismo

Páginas relacionadas

Tutoriales:Diseño de sitio web CSS

Tutoriales:Diseño web responsivo de CSS