Columns —— CSS多栏布局

前言

人们阅读文本时，如果眼睛从一行的终点移动到下一个行的开始需要太长时间，它们就会丢失它们所在的行。因此，为了最大限度地利用大屏幕，如果可以将文本分成多块列并排放置，就像报纸一样，想必会方便很多。而CSS3里的多栏(multi-col)布局，就是为此而生了。

若文章页混乱，请移步原文地址：原文链接

这个属性相当简单，今天跟大家一起学习一下。

正文

columns声明多栏布局

columns: column-width | column-count;

column-gap、column-rule样式控制

column-gap /*栏之间的间隔*/
column-rule /*分割线 与border的写法几乎一毛一样*/
/*column-rule分开写是这样的：*/
column-rule-width /*分割线宽*/
column-rule-style /*分割线样式*/
column-rule-color /*分割线颜色*/

一个相对完整的多栏布局结构是这样的： 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));

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.

我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”

回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”

			.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"
}

# Columns —— CSS多栏布局

# 前言

# 正文

# columns声明多栏布局

# column-gap、column-rule样式控制

# column-span

# Demo:

# 参考资料

Columns —— CSS多栏布局

前言

正文

columns声明多栏布局

column-gap、column-rule样式控制

column-span

Demo:

参考资料