Para crear un párrafo repartido en diferentes columnas y sin la necesidad de repartir el texto contamos con la propiedad column-count y column-gap.

column-count: detallamos el número de columnas que necesitamos.
column-gap: espacio entre las columans.

Mejor lo vemos con un ejemplo:

Este es el html del párrafo que queremos dividir.

Los siguientes estilos harán que el párrafo se divida en 5 columnas con una separación entre ellas de 40px:

Además podemos añadir separadores entre las columnas con las siguientes propiedades:

column-rule-width: grosor de la barra espaciadora.
column-rule-color: detallamos el color de la barra espaciadora.

Quedando el párrafo de la siguiente manera.

[sociallocker id=”1463″]

¡Gracias por compartir este tutorial!
Descarga el archivo Textos multicolumnas con CSS3.

[/sociallocker]

 

Hacer Comentario

Su dirección de correo electrónico no será publicada.