CSS3 Creating multiple columns
column-countproperty specifies the number of columns that need to be split.
| 12345678910111213141516171819202122 |
<!DOCTYPE html><html><head><style> .newspaper{-webkit-column-count:6; /* Safari and Chrome */}</style></head><body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><divclass="newspaper">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</div></body></html> |
CSS3 gaps between columns and columns in multiple columns
column-gapproperty specifies the gap between the column and columns.
| 12345678910111213141516171819202122 |
<!DOCTYPE html><html><head><style> .newspaper{-webkit-column-count:3; /* Safari and Chrome */-webkit-column-gap:40px; /* Safari and Chrome */}</style></head><body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><divclass="newspaper">当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。</div></body></html> |
CSS3 column Border
column-rule-styleproperty specifies the border style between the column and the column:
column-rule-widthproperty specifies the border thickness of two columns:
column-rule-colorproperty specifies the border color for two columns:
column-ruleThe Column-rule-* property is shorthand for all properties. (can use this directly, see example)
| 12345678910111213141516171819202122232425 |
<!DOCTYPE html><html><head><style> .newspaper{-webkit-column-count:3;-webkit-column-gap:40px; -webkit-column-rule:10px dotted red;/*3个参数分别代表边框的厚度、样式以及颜色*//*solid 实线 dotted虚线*/}</style></head><body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><divclass="newspaper">当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。</div></body></html> |
Specify how many columns the element spans
Column-span:
| 1234567891011121314151617181920212223242526 |
<!DOCTYPE html><html><head><style> .newspaper{-webkit-column-count:3; /* Safari and Chrome */}h2{-webkit-column-span:all; /* Safari and Chrome */}</style></head><body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><divclass="newspaper"><h2>英国维斯米斯特教堂碑文</h2>当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。</div></body></html> |
Specify the width of the column
column-widthproperty specifies the width of the column.
(This automatically depends on the width of the column, not the number of columns)
| 1234567891011121314151617181920 |
<!DOCTYPE html><html><head><style> .newspaper{-webkit-column-width:100px; /* Safari and Chrome */}</style></head><body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><divclass="newspaper">当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。</div></body></html> |
CSS3 Multi-Column Properties
The following table lists the multi-column properties for all CSS3:
| Properties |
Description |
| Column-count |
Specifies the number of columns that the element should be split. |
| Column-fill |
Specify how columns are populated |
| Column-gap |
Specify the gap between columns |
| Column-rule |
Shorthand for all column-rule-* properties |
| Column-rule-color |
Specify the color of the border between two columns |
| Column-rule-style |
Specifies the style of the border between two columns |
| Column-rule-width |
Specify the thickness of the border between two columns |
| Column-span |
Specify how many columns the element will span |
| Column-width |
Specify the width of the column |
| Columns |
Set shorthand for Column-width and Column-count
|
CSS3 Study notes in multiple columns
