CSS-Mehrfachspalten

CSS-Mehrspaltenlayout

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

Die Geschichte der Drei Reiche

Erster Aufsatz
Die Helden des Yuantao trafen sich dreimal
Der Held der Huangjinfu wurde zum ersten Mal erfolgreich

Die Weltlage ist wie ein ewiges Auf und Ab: Wenn sich etwas lange trennt, wird es sich wieder vereinen, und wenn es lange vereint ist, wird es sich wieder trennen. Am Ende der Zhou-Dynastie kämpften die sieben Staaten um die Vorherrschaft und wurden schließlich von Qin erobert; nach dem Fall des Qin-Reiches kämpften Chu und Han um die Vorherrschaft und wurden schließlich von Han erobert; die Han-Dynastie wurde von Gaozu gegründet, der die Welt vereinte, und später wurde sie von Guangwu wiederaufgelebt, bis sie unter Xian Di in drei Reiche zerfiel. Die Ursachen für den Unfrieden gehen zurück auf die Kaiser Huandi und Huanwi. Huandi unterdrückte die Guten und vertröstete die Eunuchen. Als Huandi starb, wurde Huanwi Kaiser und der General Dou Wu und der Großlehrer Chen Fan unterstützten ihn gemeinsam; zu dieser Zeit manipulierten die Eunuchen wie Cao Jie die Macht, und Dou Wu und Chen Fan planten, sie zu töten, aber das Geheimnis wurde nicht gut gehütet, und sie wurden umgebracht. Ab diesem Zeitpunkt wurde der Einfluss der Eunuchen noch größer. Am 15. April des Jahres 172, besuchte der Kaiser den Wende-Diamantenpalast. Gerade als er sich setzte, stieg ein heftiger Sturm aus dem Dachwinkel auf, und nur eine große grüne Schlange flog vom Dach herab und kroch auf den Stuhl. Der Kaiser flog um, und seine Diener eilten, ihn ins Palast zu bringen, und alle Beamten flohen. Nach einer Weile verschwand die Schlange. Plötzlich begann ein gewaltiger Donner und Regen, gefolgt von Hagel, der erst um Mitternacht aufhörte und unzählige Häuser beschädigte. Im Februar des Jahres 172 kam es in Luoyang zu einem Erdbeben; auch das Meer überflutete, und die Bewohner entlang der Küste wurden von den Wellen in das Meer gesogen. Im Jahr 178 verwandelte sich ein Huhn in ein Männchen. Am ersten Tag des sechsten Monats begann ein schwarzer Schatten von über zehn Metern, der in den Wende-Diamantenpalast flog. Im siebten Monat des Herbstes erschien ein Regenbogen im Yutang, und die Ufer der Wu yuan Shan brachen alle zusammen. Es gab viele unheilvolle Zeichen, nicht nur eines. Der Kaiser ließ die Beamten fragen, warum es zu diesen Unheilzeichen kam, und der Ratgeber Cai Yong legte einen Brief vor, in dem er meinte, dass die Verwandlung des Huhns in ein Männchen und die Verwandlung des Schmetterlings in eine Schlange darauf zurückzuführen sind, dass die Frauen und Eunuchen in die Politik eingriffen, und seine Worte waren sehr direkt. Der Kaiser seufzte, als er den Brief las, und ging, um sich umzuziehen. Cao Jie betrachtete ihn von hinten und verkündete es allen; daraufhin wurde Cai Yong unter falschen Vorwürfen angeklagt und in die Provinz geschickt. Später bildeten Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun und Guo Sheng eine Bande und wurden als "Zehn ständige Diener" bezeichnet. Der Kaiser schätzte Zhang Rang sehr und nannte ihn "Vater“. Die Politik wurde immer schlechter, was dazu führte, dass die Menschen im Land rebellieren wollten und Banden aufstanden.

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

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 Bestimmung, wie viele Spalten ein Element überspannen soll.
column-width Bestimmung der empfohlenen Breite für die Spalten.
Spalten Kurzschreibweise für die Einstellung von column-width und column-count.