Columnas CSS

Disposición en columnas de CSS

La disposición en columnas de CSS nos permite definir fácilmente múltiples columnas de texto, como en los periódicos:

La leyenda de los Tres Reinos

El primer capítulo
Celebrar una cena en el patio de la桃园 para sellar la alianza de los héroes
Cortar la cabeza de los héroes de la Yellow Turban para establecer el mérito

Hablando de las grandes tendencias del mundo, lo que se separa por mucho tiempo se unirá, y lo que se une por mucho tiempo se separará: al final de la dinastía Zhou, los siete reinos se disputaron, y se integraron en Qin; después de que Qin fue derrotado, Chu y Han se disputaron, y luego se integraron en Han; la dinastía Han desde que el emperador Gaozu cortó la serpiente y se levantó en armas, unificó el mundo, más tarde el emperador Guangwu renació, se transmitió al emperador Xian, y luego se dividió en tres reinos. Al rastrear la causa de la desorden, parece que comenzó con los emperadores Huande y Ling. El emperador Huande prohibió a las personas buenas, y creyó en los eunucos. Después de que el emperador Huande murió, el emperador Ling subió al trono, el generalissimo Dou Wu y el canciller Chen Fan, lo ayudaron mutuamente; en ese momento, los eunucos Cao Jie y otros ejercían poder, Dou Wu y Chen Fan planeaban matarlos, pero el asunto no se mantuvo en secreto, y fueron asesinados por ellos, y desde entonces los eunucos se volvieron más feroces. El 15 de abril del segundo año de la dinastía Jianning, el emperador se reunió en el Palacio Wende. Justo cuando estaba subiendo al asiento, una tormenta de viento se levantó de repente en la esquina del palacio. Vio una gran serpiente verde volar desde el techo, enrollarse en la silla. El emperador se cayó de espaldas, y sus sirvientes lo ayudaron a entrar en el palacio, y todos los funcionarios corrieron para evitarlo. En un momento, la serpiente desapareció. De repente, hubo una gran tormenta y granizo, que duró hasta la medianoche, destruyendo innumerables casas. En el segundo año de la dinastía Jianning, hubo un terremoto en Luoyang; también el mar se desbordó, y los residentes costeros fueron arrastrados por las olas al mar. En el primer año de la dinastía Guanghao, una gallina hembra se convirtió en un gallo. El primer día del sexto mes, había nubes negras de más de diez zhang que volaron al Palacio Wende. En el séptimo mes de otoño, apareció un arco iris en el Yutang, y las montañas de Wuyuan se desintegraron. Muchos desastres, no solo uno. El emperador emitió un edicto preguntando a los funcionarios sobre la causa de los desastres, el consejero lingüístico Cai Yong presentó una solicitud, afirmando que la serpiente caída y la gallina que se convirtió en un gallo eran el resultado de la participación de las mujeres en asuntos de estado, y sus palabras eran muy directas. El emperador miró el informe y suspiró, y luego se levantó para cambiarse de ropa. Cao Jie lo miró de espaldas, y anunció todo a sus sirvientes; luego lo envió a prisión por otros asuntos. Después, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, JIan Shuo, Cheng Kuang, Xia Yun, Guo Sheng, diez personas se alían para hacer el mal, se les llamó 'los diez eunucos constantes'. El emperador tenía gran confianza en Zhang Rang, y lo llamaba 'padre'. La política del gobierno se volvió cada vez peor, lo que llevó a que el corazón de las personas del mundo pensara en el desorden, y los bandidos se levantaron como abejas en una colmena.

...... ......

CSS 多列属性

在本章中,您将学到以下多列属性:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS 创建多列

column-count 属性规定元素应被划分的列数。

下面的例子将 <div> 元素中的文本分为 3 列:

实例

div {
  column-count: 3;
}

亲自试一试

CSS 指定列之间的间隙

column-gap 属性规定列之间的间隔。

下面的例子指定列之间的间距为 40 像素:

实例

div {
  column-gap: 40px;
}

亲自试一试

CSS 列规则

column-rule-style 属性规定列之间的规则样式:

实例

div {
  column-rule-style: solid;
}

亲自试一试

column-rule-width 属性规定列之间的规则宽度:

实例

div {
  column-rule-width: 1px;
}

亲自试一试

column-rule-color 属性规定列之间的规则的颜色:

实例

div {
  column-rule-color: lightblue;
}

亲自试一试

column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性。

下例设置了列之间的规则的宽度、样式和颜色:

实例

div {
  column-rule: 1px solid lightblue;
}

亲自试一试

指定元素应该横跨多少列

column-span 属性规定元素应跨越多少列。

下例规定了<h2> 元素应跨所有列:

实例

h2 {
  column-span: all;
}

亲自试一试

指定列宽度

column-width 属性为列指定建议的最佳宽度。

下例规定了列的建议最佳宽度应为 100px:

实例

div {
  column-width: 100px;
}

亲自试一试

CSS 多列属性

下表列出了所有的多列属性:

属性 描述
column-count 规定元素应划分的列数。
column-fill 规定如何填充列。
column-gap 指定列之间的间隙。
column-rule 用于设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间的规则样式。
column-rule-width 规定列之间的规则宽度。
column-span Especificar cuántas columnas debe cruzar un elemento.
column-width Especificar el ancho óptimo recomendado para las columnas.
columns Atributo abreviado para establecer column-width y column-count.