Tutoriales en la Web

Columnas en CSS3

Posteado el 24. Sep, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5

Si queremos crear una estructura de varias columnas contamos con cuatro nuevos atributos. Al día que se escribe este curso estos atributos están únicamente incorporados de manera experimental en navegadores derivados de Mozilla (Firefox) y Webkit (Chrome y Safari), por lo que hay que añadir el prefijo -moz- o -webkit- según el caso.

• column-count. Indica el número de columnas que queremos tener.
• column-width. Define el ancho de cada columna.
• column-gap. Define la separación entre columnas.
• column-rule. Crea una línea de separación entre las columnas.

Column

Código:

Code block

.ejemplo{ 
            -moz-column-count: 3; 
            -webkit-column-count: 3; 
            -moz-column-width: 100px; 
            -moz-column-gap: 20px; 
            -webkit-column-width: 100px; 
            -webkit-column-gap: 20px; /*column-rule se centra en el espacio dedicado al gap*/ 
            -webkit-column-rule: 1px solid #ccc;/*Observad que indicamos, ancho, estilo y color. 
            -moz-column-rule: 1px solid #ccc; 
        }

word-wrap

En ocasiones algunas palabras cuya longitud excede el ancho de de la capa que lo contiene, el atributo word-warp soluciona este problema “rompiendo” la palabra y situando el resto en las filas inferiores. Personalmente me parece una solución a medias, ya que lo correcto sería la inclusión de un guión en la ruptura de la palabra, al igual que cuando escribimos en un editor de textos.

word-wrap

Articulos relacionados:

Tags: css3, html5