in

Cómo crear un diseño de dos columnas


Aprenda a crear una cuadrícula de diseño de 2 columnas con CSS.


Inténtalo tú mismo «


Cómo crear un diseño de dos columnas

Paso 1) Agregar HTML:

Ejemplo



Paso 2) Agrega CSS:

En este ejemplo, crearemos dos igual columnas:

Ejemplo flotante

.column {

flotador izquierdo;
ancho: 50%;
}

/ * Limpiar los flotadores después de las columnas * /
.row: after {
contenido: «»;

pantalla: mesa;
Limpia los dos;
}

Inténtalo tú mismo »

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

Depende de usted si desea utilizar flotadores o flex para crear un diseño de dos columnas. Sin embargo, si necesita soporte para IE10 y versiones anteriores, debe usar float.

Propina: Para obtener más información sobre el módulo de diseño de caja flexible, lea nuestro capítulo CSS Flexbox.


En este ejemplo, crearemos dos desigual columnas:

Ejemplo

.column {
flotador izquierdo;
}

.izquierda {
ancho: 25%;
}

.Derecha {
ancho: 75%;
}

Inténtalo tú mismo »

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

Ejemplo

/ * Diseño receptivo: cuando la pantalla tiene menos de 600 px de ancho, haga que las dos columnas se apilen una encima de la otra en lugar de una al lado de la otra * /
@media pantalla y (ancho máximo: 600px) {
.column {
ancho: 100%;
}
}

Inténtalo tú mismo »

Propina: Vaya a nuestro Tutorial de diseño de sitios web de CSS para obtener más información sobre los diseños de sitios web.

Propina: Vaya a nuestro Tutorial de diseño web receptivo de CSS para obtener más información sobre el diseño web receptivo y las cuadrículas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descripción general de Java SE: preguntas frecuentes generales

Método Java String intern () – javatpoint