Las columnas son una característica muy útil en páginas web, ya que permiten organizar el contenido de manera más eficiente. En este artículo, aprenderás cómo crear columnas en HTML y CSS.
Las columnas en HTML y CSS son una manera de dividir el contenido de una página en varias secciones, de forma que cada una ocupe una fila independiente. Para crear columnas, es necesario utilizar el atributo column-count en el elemento
Cómo se crean columnas en HTML: una guía paso a paso
Las columnas son una característica que nos permite dividir el contenido de una página en dos o más secciones, de forma que cada una de ellas ocupe una parte del espacio horizontal disponible.
En HTML, las columnas se crean a partir de elementos, especificando en el atributo «class» el nombre de la clase que corresponda a la columna. Por ejemplo:
… el contenido de la columna uno …
… el contenido de la columna dos …
En este caso, el navegador dará formato a las columnas usando el estilo predefinido «column-one» y «column-two». Si queremos cambiar el estilo de las columnas, podemos hacerlo añadiendo el estilo correspondiente al atributo «style». Por ejemplo:
… el contenido de la columna uno …
… el contenido de la columna dos …
En este caso, las columnas tendrán un ancho de 50%, independientemente del ancho de la página.
También podemos especificar el ancho de cada columna, usando el atributo «width». Por ejemplo:
… el contenido de la columna uno …
… el contenido de la columna dos …
En este caso, cada columna tendrá un ancho de 200px.
Tutorial: Cómo hacer 4 columnas en CSS
Las columnas en CSS son una parte importante de la estructura de una página web. Hay muchos estilos diferentes para colocar columnas, pero este tutorial se enfocará en cómo crear cuatro columnas en CSS.
Para comenzar, agrega el siguiente código a la hoja de estilos de tu página web:
.columns {
width: 100%;
}
.column {
float: left;
width: 33.3%;
}
.column-2 {
float: left;
width: 33.3%;
}
.column-3 {
float: left;
width: 33.3%;
}
.column-4 {
float: left;
width: 33.3%;
}
Este código establece cuatro columnas en la página web, cada una con el mismo ancho (100%). Además, las columnas estarán alineadas a la izquierda. Si quieres cambiar el alineamiento, solo cambia «float: left» a «float: right».
Para añadir contenido a las columnas, agrega el siguiente código a la sección «div.columns»:
div.columns {
width: 100%;
}
div.column {
float: left;
width: 33.3%;
}
div.column-2 {
float: left;
width: 33.3%;
}
div.column-3 {
float: left;
width: 33.3%;
}
div.column-4 {
float: left;
width: 33.3%;
}
Este código agregará el contenido a las columnas. Si quieres añadir el mismo contenido a todas las columnas, simplemente agrega el código a todas las secciones «div.column». Si quieres agregar contenido específico a cada columna, agrega el código a la sección «div.column-X», donde «X» es el número de la columna.
Por ejemplo, para agregar el contenido «Hello, world!» a la columna primera, agrega el siguiente código a la sección «div.column-1»:
div.column-1 {
float: left;
width: 33.3%;
text-align: center;
}
Hello, world!
Cómo dividir en columnas con CSS
CSS permite dividir el contenido en columnas usando la propiedad column-count. La siguiente regla dividirá el contenido en tres columnas:
.columns { column-count: 3; }
Dividir un texto en dos columnas HTML
Dividir un texto en dos columnas HTML es muy sencillo. Basta con añadir el siguiente código al inicio de tu texto:
Todo el texto se dividirá en dos columnas iguales.
Para cambiar el ancho de cada columna, simplemente cambia el valor de column-width. Por ejemplo, para que cada columna tenga el ancho de 75%, añade el siguiente código:
Si quieres que el texto vuelva a aparecer en una sola columna, elimina el código del inicio del texto.
Las columnas son una característica muy útil en la web, ya que nos permiten organizar el contenido de forma más eficiente. Con HTML y CSS podemos crear columnas fácilmente, de forma que podamos adaptar el diseño de nuestra web a nuestras necesidades.
Las columnas son una característica de diseño que nos permite dividir el contenido de nuestras páginas en secciones verticales, mostrando el texto o el diseño en varias columnas.
Para crear columnas en HTML y CSS, podemos usar el atributo column-count, el cual nos permite especificar el número de columnas que queremos que aparezcan. Por ejemplo, si queremos mostrar el texto en tres columnas, podemos usar el siguiente código:
… el contenido de nuestra página …
También podemos usar el atributo column-gap, el cual nos permite especificar el espacio en blanco entre las columnas. Por ejemplo, si queremos que haya un espacio de dos centímetros entre las columnas, podemos usar el siguiente código:
… el contenido de nuestra página …
Por último, podemos usar el atributo column-width, el cual nos permite especificar el ancho de cada columna. Por ejemplo, si queremos que cada columna tenga un ancho de seis centímetros, podemos usar el siguiente código:
… el contenido de nuestra página …