Columns —— CSS多栏布局
前言
人们阅读文本时，如果眼睛从一行的终点移动到下一个行的开始需要太长时间，它们就会丢失它们所在的行。 因此，为了最大限度地利用大屏幕，如果可以将文本分成多块列并排放置，就像报纸一样，想必会方便很多。 而CSS3里的多栏(multi-col)布局，就是为此而生了。
若文章页混乱，请移步原文地址：原文链接
这个属性相当简单，今天跟大家一起学习一下。
正文
columns声明多栏布局
columns: column-width | column-count;
1
column-gap、column-rule样式控制
column-gap /*栏之间的间隔*/
column-rule /*分割线 与border的写法几乎一毛一样*/
/*column-rule分开写是这样的：*/
column-rule-width /*分割线宽*/
column-rule-style /*分割线样式*/
column-rule-color /*分割线颜色*/
1
2
3
4
5
6
2
3
4
5
6
一个相对完整的多栏布局结构是这样的：
TIP
多栏容器中的其他元素，样式中的百分比是相对其所在的某一栏的。 见下例中的图片，宽度是100%。
column-span
如果想让某元素在多栏容器中占据整行(横穿所有栏)，需要用到column-span。该属性只有两个值：'all'、'none'。 详见下例。
但是这个属性目前pc端的Firefox还没支持，奇怪的是移动端的Firefox竟然支持😄 。
下面是浏览器计算column-count、column-width和容器可用宽度的伪代码：
let N, //column-count
W, //column-width
W; //容器的可用宽度
if ((column-width == auto) && (column-count == auto)) {
return; /* 不是多栏容器 */
}
if (column-width == auto) {
N = column-count;
} else if (column-count == auto) {
N = max(1, floor((U + column-gap) / (column-width + column-gap)));
} else {
N = min(column-count, max(1, floor((U + column-gap) / (column-width + column-gap))));
}
W = max(0, ((U + column-gap) / N - column-gap));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Demo:
My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, he was a member of a small country music band.
They would play at local dances and on a few occasions would play for the local radio station.
He often told us how he had auditioned and earned a position in a band that featured Patsy Cline as their lead singer. He told the family that after he was hired he never went back. Dad was a very religious man. He stated that there was a lot of drinking and cursing the day of his audition and he did not want to be around that type of environment.
He often told us how he had auditioned and earned a position in a band that featured Patsy Cline as their lead singer. He told the family that after he was hired he never went back. Dad was a very religious man. He stated that there was a lot of drinking and cursing the day of his audition and he did not want to be around that type of environment.
我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”
回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”
回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”
.content {
"column-width": "100px",
"column-count": 3,
"column-gap": "10px",
"column-rule-width": "3px",
"column-rule-style": "solid",
"column-rule-color": "#000"
}
.span {
"column-span": "all"
}