CSS Mehrspalten

CSS mehrspaltige Anordnung

CSS mehrspaltige Anordnung ermöglicht es uns, leicht mehrspaltige Texte zu definieren - wie in Zeitungen:

Die Geschichte der Drei Reiche

Erster Aufsatz
Die edlen Krieger von Yuantao schlossen sich dreimal zu einer Bruderschaft zusammen
Der Held der Huangjinfu wurde als erster zum Ruhm erhoben

Die Weltlage hat ihre eigenen Gesetze: Langfristige Spaltung führt zur Vereinigung, und umgekehrt: Am Ende der Zhou-Dynastie kämpften die sieben Staaten um die Vorherrschaft, wurden jedoch von Qin unterworfen; nach dem Fall des Qin-Reiches kämpften Chu und Han, bevor sie ebenfalls in das Han-Reich integriert wurden. Nach der Aufstand des Gaozu gegen die Weiße Schlange wurde das Reich vereint, später wurde es durch die Restauration des Guangwu und die Herrschaft des Xian Di in drei Reiche geteilt. Die Ursachen für die Unruhen lassen sich möglicherweise auf die Kaiser Huandi und Huanwi zurückführen. Huandi beschränkte die gutmütigen Menschen und vertraute den Eunuchen. Nach seinem Tod wurde Huanwi zum Kaiser ernannt, und der General Dou Wu und der Großlehrer Chen Fan unterstützten ihn gemeinsam; zu dieser Zeit manipulierten Eunuchen wie Cao Jie die Macht. Dou Wu und Chen Fan planten, sie zu töten, aber das Geheimnis wurde nicht gut gehalten, und sie wurden umgebracht. Ab diesem Zeitpunkt wurde die Macht der Eunuchen noch größer. Am 15. April des zweiten Jahres des Jianning, trat der Kaiser in den Wende-Diamantenpalast ein. Während er sich auf den Thron setzte, stürzte plötzlich ein heftiger Sturm von der Ecke des Palastes auf, und eine große grüne Schlange flog vom Dach herab und windete sich um den Stuhl. Der Kaiser stürzte um und wurde von seinen Leuten gerettet, die in den Palast zurückgebracht wurden, während alle Beamten flüchteten. Bald verschwand die Schlange. plötzlich begann ein gewaltiger Donner und Regen, begleitet von Hagel, der bis zum Mitternachtshimmel fielen und unzählige Häuser beschädigten. Im Februar des vierten Jahres des Jianning kam es in Luoyang zu einem Erdbeben; auch die Meere überschwemmten die Küstenregionen, und die Bewohner wurden von den Wellen in das Meer gerissen. Im ersten Jahr des Guanghe wurde ein Huhn in ein Männchen verwandelt. Am ersten Tag des sechsten Monats des Jahres wurde ein schwarzer Nebel von über zehn Metern Höhe in den Wende-Diamantenpalast geschleppt. Im siebten Monat des Jahres erschien ein Regenbogen im Yutang, und die Ufer des Wuyuan Shan brachen auf. Es gab viele unheilvolle Zeichen, nicht nur eines. Der Kaiser ließ eine Proklamation an die Beamten senden, um die Ursachen der Katastrophen zu erfragen. Der Ratgeber Cai Yong schlug vor, dass die Umwandlung des Huhns in ein Männchen und die Umwandlung des Schmetterlings in einen Fisch auf die Einmischung der Frauen und Eunuchen zurückzuführen sei, und seine Worte waren direkt und scharf. Der Kaiser seufzte, als er das Dokument las, und ging, um sich umzuziehen. Cao Jie beobachtete ihn von hinten und verkündete es seinen Leuten; daraufhin wurde Cai Yong unter falschen Vorwürfen angeklagt und in die Provinz geschickt. Später bildeten Zhang Rang, Zhao Zhong, Feng Yu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun und Guo Sheng eine Gruppe von zehn Eunuchen, die als "Zehn ständige Eunuchen" bekannt wurden. Der Kaiser verehrte Zhang Rang und nannte ihn "Onkel". Die Politik wurde immer schlechter, was zur Unruhe des Volkes und dem Aufkommen von Banden führte.

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

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 Legt fest, wie viele Spalten ein Element überschreiten soll.
column-width Gibt die empfohlene beste Breite für die Spalten an.
Spalten Kurzschreibweise zur Einstellung von column-width und column-count.