通过css3，可以创建多个列 对文本进行布局
column-count属性指定元素的列数应分为多少列
实例
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。”
</div>
图片.png
column-rule属性设置列之间的宽度，样式和颜色
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>
<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。”
</div>
图片.png
所有关于css3多列的属性
| 属性 | 说明 | CSS |
|---|---|---|
| column-count | 指定元素应分为的列数 | 3 |
| column-fill | 指定如何填充列 | 3 |
| column-gap | 指定列之间差距 | 3 |
| column-rule | 一个用于设置所有列规则的简写属性 | 3 |
| column-rule-color | 指定的列之间颜色规则 | 3 |
| column-rule-style | 指定的列之间的样式规则 | 3 |
| column-rule-width | 指定的列之间的宽度规则 | 3 |
| column-span | 指定一个元素应该横跨多少列 | 3 |
| column-width | 指定列的宽度 | 3 |
| columns | 缩写属性设置列宽和列数 | 3 |
相关属性值的用法
- column-rule-style
| 值 | 描述 |
|---|---|
| none | 定义没有规则。 |
| hidden | 定义隐藏规则。 |
| dotted | 定义点状规则。 |
| dashed | 定义虚线规则。 |
| solid | 定义实线规则。 |
| double | 定义双线规则。 |
| groove | 定义 3D grooved 规则。该效果取决于宽度和颜色值。 |
| ridge | 定义 3D ridged 规则。该效果取决于宽度和颜色值。 |
| inset | 定义 3D inset 规则。该效果取决于宽度和颜色值。 |
| outset | 定义 3D outset 规则。该效果取决于宽度和颜色值。 |
实例
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:dotted;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:dotted;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:dotted;
}
.newspaper1
{
column-count:3;
column-gap:40px;
column-rule-style:inset;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:inset;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:inset;
}
</style>
<body>
<div class="newspaper">
当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。
</div>
<br><br>
<div class="newspaper1">
当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。
</div>
</body>
图片.png
当然我们也可以直接用
column-rule:4px outset #ff00ff;
这一个属性来设置宽度、样式和颜色，也可以达到同样的效果。
js-dom操作
