CSS flere kolonner
- Forrige side CSS sidehopping
- Næste side CSS brugergrænseflade
CSS multi-column layout
CSS multi-column layout allows us to easily define multi-column text - like newspapers:
Romance of the Three Kingdoms
The First Chapter
Feasting in the Peach Garden, the heroes make a three-way alliance
Slaying the Yellow Turban heroes and establishing merit
Tale of the world's great trend, divided for a long time must be united, united for a long time must be divided: at the end of the Zhou Dynasty, the seven states were divided and conquered by Qin; after the Qin Dynasty was destroyed, Chu and Han were divided and then united with Han; the Han Dynasty, since the Founding Emperor's rebellion by cutting the white snake, unified the world, and later the Guangwu Restoration, passed to the Xian Emperor, and eventually divided into three states. The cause of the chaos can be traced back to Emperor Huan and Emperor Ling. Emperor Huan imprisoned the good people, and believed in the eunuchs. After Emperor Huan died, Emperor Ling ascended the throne, General Dou Wu and Prime Minister Chen Fan jointly assisted him; at that time, the eunuch Cao Jie and others wielded power, Dou Wu and Chen Fan plotted to kill them, but the secret was not kept, and they were betrayed and killed, and the eunuchs became even more brazen. On the day of the full moon in the second month of the Jian宁 year, the Emperor was in the Wen德殿. Just as he was about to sit down, a fierce wind rose from the corner of the hall. Suddenly, a large green snake flew down from the beam and coiled around the chair. The Emperor was frightened and fell, and was quickly rushed into the palace by the attendants. All the officials ran away in panic. In a moment, the snake disappeared. Suddenly, there was a heavy thunderstorm and hail, which lasted until midnight, and countless houses were destroyed. In the second month of the fourth year of the Jian宁 year, there was an earthquake in Luoyang; the sea also overflowed, and the coastal residents were all swept into the sea by the great waves. In the first year of the Guang和, a female chicken turned into a male. On the first day of the sixth month, a black mist over ten chi flew into the Wen德殿. In the seventh month of autumn, a rainbow appeared in the Yutang, and the five yuan mountain shore was all collapsed. There were many omens, not just one. The Emperor issued an edict to inquire among the ministers about the cause of the disasters, and the counselor Cai Yong submitted a memorial, arguing that the dragonfly fell and the chicken turned male were caused by the woman's intervention in politics, and his words were very direct. The Emperor sighed after reading the memorial and got up to change clothes. Cao Jie looked behind and whispered to the attendants; he was thus framed for other crimes and exiled to the countryside. Later, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jian Shuo, Cheng Kuang, Xia Yun, Guo Sheng, the ten men colluded to be奸, known as the 'Ten Eunuchs'. The Emperor respected and trusted Zhang Rang, calling him 'A Father'. The state affairs were getting worse day by day, leading to the hearts of the people all over the world thinking of chaos, and bandits rising in droves.
...... ......
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-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; }
CSS 多列属性
下表列出了所有的多列属性:
属性 | 描述 |
---|---|
column-count | 规定元素应划分的列数。 |
column-fill | 规定如何填充列。 |
column-gap | 指定列之间的间隙。 |
column-rule | 用于设置所有 column-rule-* 属性的简写属性。 |
column-rule-color | 规定列之间规则的颜色。 |
column-rule-style | 规定列之间的规则样式。 |
column-rule-width | 规定列之间的规则宽度。 |
Column-span | Definer hvor mange kolonner et element skal krydse. |
Column-width | Angiv den anbefalede bedste bredde for kolonner. |
Columns | Kortformet egenskab til at sætte column-width og column-count. |
- Forrige side CSS sidehopping
- Næste side CSS brugergrænseflade