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:;
}
这样不管窗口怎么边它都是分成两列,其实任何自适应的原理也是如此。