columns 字符分割
这个主要用来对字符进行横向分割排版，例如报纸的版面。
columns是简写，用于设置列宽和列数。
columns 是 column-width每列宽度，column-count 每列的列数这两个的缩写，当列宽和列数的乘积大于元素的宽度时候就不会在分开合成一列。当他们的乘积小于元素的外宽的时候，每列的实际宽度可能大于column-width 设定的值。
使用 columns 时候
.demo{
columns: column-width column-count;
}
单独使用时候：
.demo{
column-count:number;
column-width：value
}
另外 colunms 还有其他的补充：
column-gap:<length> | normal
设置列与列之距离：
column-gap:<length> | normal
设置列与列之边线：
column-rule：[ column-rule-width ] [ column-rule-style ] [ column-rule-color ]
内部元素是否允许横跨所有的列：
column-span：none | all
列的高度是否统一：
column-fill :auto | balance
这个兼容性极差，除了火狐外其它浏览器均不在了。
.demo{
-webkit-columns:px ;
}
图
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:px ;
}
</style>
<div class="demo">
<p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？
撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉，
沉是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div>
</head>
<body>
.demo{
-webkit-columns:px ;
}
图
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:px ;
}
</style>
<div class="demo">
<p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？
撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉，
沉是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div>
</head>
<body>
<div class="demo">
<p>
轻轻的我走了，正如我轻轻的来；
我轻轻的招手，作别西天的云彩。 那河畔的金柳， 是夕阳中的新娘； 波光里的艳影， 在我的心头荡漾。软泥上的青荇，油油的在水底招摇； 在康河的柔波里， 我甘心做一条水草！ 那榆荫下的一潭，不是清泉， 是天上虹； 揉碎在浮藻间，沉淀着彩虹似的梦。 寻梦？
</p>
<p>
撑一支长篙， 向青草更青处漫溯；满载一船星辉， 在星辉斑斓里放歌。但我不能放歌，悄悄是别离的笙箫； 夏虫也为我沉，沉是今晚的康桥！悄悄的我走了，正如我悄悄的来； 我挥一挥衣袖，不带走一片云彩。
</p>
</div>
.demo
{
-webkit-columns:px ;
}
p{
margin: ;
}
图
<!DOCTYPE html>
<html>
<head>
<style>
.demo
{
-webkit-columns:px ;
}
p{
margin: ;
}
</style>
<div class="demo">
<p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？
</p>
<p>
撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉，
沉是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div>
</head>
<body>
.demo{
-webkit-columns:px ;
column-gap:px
}
图
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:px ;
column-gap:px
}
</style>
<div class="demo">
<p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？
</p>
<p>
撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉，
沉是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div>
</head>
<body>
.demo{
-webkit-columns:px ;
column-gap:px;
column-rule:px solid #ccc;
}
图
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:px ;
column-gap:px;
column-rule:px solid #ccc;
}
</style>
<div class="demo">
<p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？
</p>
<p>
撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉，
沉是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div>
</head>
<body>
<div class="demo">
<p class="head">再别康桥</p>
<p>
轻轻的我走了，正如我轻轻的来；
我轻轻的招手，作别西天的云彩。 那河畔的金柳， 是夕阳中的新娘； 波光里的艳影， 在我的心头荡漾。软泥上的青荇，油油的在水底招摇； 在康河的柔波里， 我甘心做一条水草！ 那榆荫下的一潭，不是清泉， 是天上虹； 揉碎在浮藻间，沉淀着彩虹似的梦。 寻梦？
</p>
<p>
撑一支长篙， 向青草更青处漫溯；满载一船星辉， 在星辉斑斓里放歌。但我不能放歌，悄悄是别离的笙箫； 夏虫也为我沉，沉是今晚的康桥！悄悄的我走了，正如我悄悄的来； 我挥一挥衣袖，不带走一片云彩。
</p>
</div>
.demo{
-webkit-columns:px ;
column-gap:px;
column-rule:px solid #ccc;
}
.head{
column-span:all;
}
p{
margin: ;
text
}
图
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:px ;
column-gap:px;
column-rule:px solid #ccc;
}
.head{
column-span:all;
text-align: center;
}
p{
margin: ;
background: #ccc;
column-fill:balance;
}
</style>
<div class="demo">
<p class="head">
再别康桥
</p>
<p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？
</p>
<p>
撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉，
沉是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div>
</head>
<body>
使用 columns 可以的把元素内的字符分成我们想要的列数，如果想要自适应该怎么做呢？可以只设置列数这样在一定程度上可以不考虑元素的宽度，如下：
.demo{
-webkit-columns:;
}
这样不管窗口怎么边它都是分成两列，其实任何自适应的原理也是如此。
602392714
清零编程群