CSS3 proporciona un nuevo método para trabajar con columnas que no requieren que usted tenga un grado de matemáticas y realizar configuraciones de prueba con estilos arcanos.

Los estilos de columna proporcionan los medios para crear varias columnas en una página sin mucho esfuerzo de su parte. Dependiendo del estilo específico que utilice, puede obtener varios diseños o simplemente crear una configuración de tipo periódico en el contenido fluye desde la columna a columna basado en la configuración del navegador del usuario.

Como con cualquier cosa CSS 3-específica, es necesario probar la aplicación con los navegadores que los usuarios vayan a utilizar. Además, esta característica se considera experimental - y usted tiene que saltar a través de algunos aros para que funcione con algunos navegadores.

Mientras que Internet Explorer y Opera soportan las propiedades de la columna directamente, debe anteponer -moz- para que funcionen con Firefox y -webkit- para que funcionen con Safari y Chrome. La siguiente lista proporciona una breve descripción de las propiedades de la columna.

• column-count: Especifica el número de columnas para crear. La anchura de las columnas fluctúa de forma automática cuando el usuario cambia el tamaño de la ventana del navegador (o el navegador muestra una barra de desplazamiento horizontal para que sea posible para desplazarse a través de las columnas cuando un ancho específico se establece también).

• columna de relleno: determina cómo el navegador llena las columnas (ya sea el llenado de una columna a la vez o llenar todas las columnas simultáneamente con una cantidad incluso de contenido).

• columna-gap: Crea un espacio entre las columnas para que sea más fácil determinar cuando una columna y empieza otro.

• columna en reglas: Crea una regla entre columnas por lo que el usuario puede ver un separador físico. Esta propiedad consta de color, estilo y ancho.

• columna de regla de color: determina con el color de la norma que se utiliza entre las columnas.

• columna en reglas de estilo: Determina el estilo de la norma que se utiliza entre las columnas.

• columna-regla-width: Determina la anchura de la regla usada entre las columnas.

• columna útil: Especifica el número de columnas que un objeto puede abarcar.

• columna-width: Especifica un ancho de columna.

• columnas: Proporciona un método abreviado para definir tanto la columna de recuento y las propiedades de la columna de ancho.

Una de las maneras más fáciles de comenzar a experimentar con columnas es crear algo de contenido y luego usar un diseño de estilo periódico para presentarlo. El siguiente procedimiento le ayuda a crear un diseño de múltiples periódico columna de texto ficticio.

1. Crear un nuevo archivo HTML 5 con su editor de texto.

   Video: Texto en varias columnas con CSS3

2. Escriba el siguiente código de la página HTML.

   Creando un diseño Periódico
   Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam eratvolutpat. Ut wisi enim ad minim veniam, quisnostrud exerci Ullamcorper tación suscipitlobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor en hendreritin vulputate velit esse molestie consequat, velillum dolore eu feugiat nulla facilisis en veroeros et accumsan et iusto odio dignissim quiblandit Praesent luptatum zzril delenit augueduis dolore te feugait nulla facilisi. Nam libertempor cum soluta nobis eleifend opción conguenihil imperdiet gota de resina id quod Mazim placeratfacer assum possim. Typi no habent claritateminsitam- est usus legentis en IIS qui facit eorumclaritatem. Investigationes demonstraveruntlectores me legere lius quod ii saepius legunt.

   Todo lo que tenemos aquí es un encabezamiento y el párrafo. El párrafo contiene el texto de relleno utilizado para el contenido en el diseño de periódicos.

   Si te estás preguntando qué Vestibulum se trata, se puede leer más en Lorem Ipsum. De hecho, el sitio proporciona un generador de maniquí de texto que no va a distraer la atención del espectador a partir de un diseño subyacente u otra consideración técnica.

3. Guarde el archivo como NewspaperLayout.HTML.

4. Crear un nuevo archivo CSS con su editor de texto.

5. Escriba la siguiente información de estilo CSS.

   #text {column-count: 3 columnas en reglas: 4 píxeles Blue ridge-columna-gap: 20px; -moz-column-count: 3 - MOZ-columna-regla: 4 píxeles Blue ridge - MOZ-columna-gap: 20px; -webkit-column-count: 3 - webkit-columna-regla: 4 píxeles Blue ridge - webkit-columna-gap: 20px;}

   El ejemplo crea un estilo que incluye tres columnas, con una regla azul entre las columnas. Por supuesto, es necesario repetir los estilos tres veces - una vez para cada uno de los requisitos del navegador.

6. Guarde el archivo como NewspaperLayout.CSS.

7. Cargar el ejemplo NewspaperLayout.

   Ves un formato de estilo periódico. Este formato será más fácil de leer cuando se trabaja con una gran cantidad de texto en una página web. En el pasado, usted habría tenido que trabajar muy duro para conseguir un diseño tan bonito como éste, pero ahora todo lo que necesita es un par de estilos simples.

   

   Video: Crea tu propio sistema GRID de columnas con html5 y css3