DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
28-10-2013

Con la propiedad Multi-column de CSS3 podemos dividir nuestro párrafos en columnas; utilizando algunos atributos:

Básicamente tenemos dos maneras de dividir nuestras párrafos en columnas; definiendo el número de columnas con la propiedad column-count, o definiendo el ancho de cada una con la propiedad column-width.

Dividiendo los párrafos en columnas utilizando la propiedad column-count

CSS

div.ejemplo1{
-webkit-column-count:2; 
-moz-column-count:2; 
}

HTML

<div class="ejemplo1">
    <p>La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.</p>
    <p>La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.</p>
</div>

Resultado

La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.

La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.

Dividiendo los párrafos en columnas utilizando la propiedad column-width

CSS

div.ejemplo2{
-webkit-column-width:300px; 
-moz-column-width:300px; 

HTML

<div class="ejemplo2">
    <p>La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.</p>
    <p>La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.</p>
</div>

Resultado

La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.

La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.

En ambos casos podemos utilizar las otras propiedades.

CSS

div.ejemplo3{
-webkit-column-width:300px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid black;
-moz-column-width:300px; 
-moz-column-gap: 20px;
-moz-column-rule: 1px solid black;
}

HTML

<div class="ejemplo3">
    <p>La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.</p>
    <p>La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.</p>
</div>

Resultado

La Luna es el único satélite natural de la Tierra. Con un diámetro de 3476 km es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto de su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas.

La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos consiguió las únicas misiones tripuladas hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.

Conclusiones

Con este tutorial podemos ver lo sencillo que resulta dividir nuestros textos en columnas sin la necesidad de utilizar otras estructuras adicionales en HTML, como las tablas.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Atomo con CSS

Atomo con CSS

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

Algunos artículos que te pueden interesar

Truco para los bordes en CSS: Bordes transparentes

Truco para los bordes en CSS: Bordes transparentes

En esta entrada veremos un pequeño truco que permite que los bordes de los contenedores de nuestros elementos HTML; se vean transparentes.

Andrés Cruz 22-01-2015

Efectos con hover y transition en CSS (parte 2) -Filtros-

Efectos con hover y transition en CSS (parte 2) -Filtros-

En esta entrada veremos cómo emplear los Filtros en CSS en conjunto con las transiciones sobre imágenes permiten crear efectos muy llamativos para los filtros soportados.

Andrés Cruz 02-07-2015

Scrolling horizontal con CSS

Scrolling horizontal con CSS

Andrés Cruz 06-12-2016