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

一个相对完整的多栏布局结构是这样的: demo

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

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.

我与父亲不相见已二年余了,我最不能忘记的是他的背影。那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!” 回家变卖典质,父亲还了亏空;又借钱办了丧事。这些日子,家中光景很是惨淡,一半为了丧事,一半为了父亲赋闲。丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行。 到南京时,有朋友约去游逛,勾留了一日;第二日上午便须渡江到浦口,下午上车北去。父亲因为事忙,本已说定不送我,叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房,甚是仔细。但他终于不放心,怕茶房不妥帖;颇踌躇了一会。其实我那年已二十岁,北京已来往过两三次,是没有甚么要紧的了。他踌躇了一会,终于决定还是自己送我去。我两三回劝他不必去;他只说,“不要紧,他们去不好!”

3px solid #000
			.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"
}
		

参考资料

最近更新: 4/24/2019, 11:03:05 PM