CSS3 diseño en múltiples columnas

Usar CSS3en el que se puede dividir el contenido de texto de un elemento en múltiples columnas.

Crear diseño en múltiples columnas

CSS3Se introdujo el módulo de diseño en múltiples columnas, que permite crear múltiples disposiciones de columnas de manera simple y efectiva. Ahora, no es necesario usar cuadros flotantes para crear diseños como los vistos en revistas y periódicos. Esto es un ejemplo de uso de CSS3Un ejemplo simple de funcionalidad de diseño en múltiples columnas que divide el texto en tres columnas.

p {
　　　　-webkit-column-count:　3;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-count:　3;　/*　Firefox　*/
　　　　　　　　　　　　column-count:　3;　
}

establecen el número de columnas o el ancho.

propiedades CSS, column-count y column-width especifica si se mostrarán columnas y cuántas.-count establece el número de columnas dentro del elemento multicol, mientras que column-El atributo width establece el ancho necesario de la columna.

p {
　　　　-webkit-column-width:　150px;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-width:　150px;　/*　Firefox　*/
　　　　　　　　　　　　column-width:　150px;　
}

para establecer el espacio entre columnas.

Puede usar la propiedad column-La propiedad gap especifica el espacio entre columnas. Se aplica el mismo espacio entre cada columna. El espacio predeterminado es normal, que es igual a1em.

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
}

para establecer la regla de columna

También puede usar column-La propiedad rule añade una línea entre las columnas, es decir, la regla. Es una propiedad abreviada utilizada para establecer el ancho, estilo y color de la regla en una declaración única. La propiedad column-La propiedad rule utiliza los mismos valores que border y outline.

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule:　2px sólido rojo;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule:　2px sólido rojo;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule:　2px sólido rojo;
}

CSS3Propiedades de multicolumna

La siguiente tabla resume brevemente todas las propiedades de multicolumna: