Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

columns

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

columns 是一个简写的CSS 属性,允许同时设置 column-widthcolumn-count 属性。

初始值as each of the properties of the shorthand:
适用元素non-replaced block elements (except table elements), table-cell or inline-block elements
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
是否适用于 CSS 动画as each of the properties of the shorthand:
正规顺序order of appearance in the formal grammar of the values

语法

Formal syntax: <'column-width'> || <'column-count'>
columns: 1em;/*column-width列的长度值*/
columns: 1;/*column-count列数*/
columns: auto;
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

取值

<'column-width'>
是一个用来暗示渲染出的最优的列宽的 <length> (长度值)。但实际的长度值可能会更宽,用来填充剩余的可用空间;也可能更窄,如果可用宽度小于所定义的列宽。长度值必须为严格的正整数,否则此声明将会失效。
<'column-count'>
是一个 <integer> (整数),且必须为正整数。用来将一整块内容分割成理想的个数的几列。如果column-width 被设置为non-auto的值,它只是表示所允许的最大列数。

示例

.content-box {
  border: 10px solid #000000;
  columns:3;
}

规范

规范 标准 注释
CSS Multi-column Layout Module
columns
Candidate Recommendation Initial definition

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) -webkit 9 (9) -moz 10

11.1

15 -webkit

3.0 (522)-webkit
on display: table-caption (Yes) 37 (37) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 -webkit 22.0 (22) -moz 10

11.5

32 -webkit

3.2 -webkit
on display: table-caption (Yes) 37.0 (37) (Yes) (Yes) (Yes)

文档标签和贡献者

 此页面的贡献者: Minya_Chan, Sebastianz, fscholz, FredWe
 最后编辑者: Minya_Chan,