首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

列 | columns

columns CSS属性是一个速记属性,允许同时设置column-widthcolumn-count同时性。

代码语言:javascript
复制
/* Column width */
columns: 1em;

/* Column count */
columns: auto;
columns: 1;

/* Combination of column width and count */
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: unset;

初始值

作为简写的每个属性:column-width:auto column-count:auto

适用于

除表格外包装盒的块容器

遗传

没有

媒体

visual

计算值

作为简写的每个属性:column-width:绝对长度,零或更大的列数:如指定的那样

动画类型

作为简写的每个属性:column-width:长度column-count:整数

规范的顺序

逐个语法

  • column-width*auto
  • column-count*auto
代码语言:txt
复制
Applies to Block containers except table wrapper boxes   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:
  • column-width*绝对长度,零或更大
  • column-count*具体规定
代码语言:txt
复制
Animation type as each of the properties of the shorthand:
  • column-width*a长度
  • column-count*整型
代码语言:txt
复制
Canonical order per grammar  

语法

<'column-width'><length>给出列的最佳宽度的提示的值。实际的列宽可能会更宽(填充可用空间),或者更窄(仅当可用空间小于指定的列宽时)。长度必须严格肯定,否则声明无效。<'column-count'>严格正面<integer>描述元素内容将流入的理想列数。如果该column-width值也设置为非自动值,则仅表示允许的最大列数。

形式语法

代码语言:javascript
复制
<'column-width'> || <'column-count'>

HTML

代码语言:javascript
复制
<p class="content-box">
  This is some text split into three columns
  using the CSS property columns. The text is
  equally distributed over the columns.
</p>

CSS

代码语言:javascript
复制
.content-box {
  margin: 0;
  height: 90px;
  border: 3px solid black;
  columns: 3;
}

结果

规范

Specification

Status

Comment

CSS Multi-column Layout ModuleThe definition of 'columns' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

(Yes) -webkit 50.01

(Yes)-webkit (Yes)

9 (9) -moz 52 (52)2

10

11.10 15 -webkit

3.0 (522)-webkit

on display: table-caption

(Yes)

(Yes)

37 (37)

(Yes)

(Yes)

(Yes)

Feature

Android

Android Webview

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Chrome for Android

Basic support

2.1 -webkit

50.0

(Yes)-webkit (Yes)

22.0 (22) -moz 52.0 (52)2

10

11.5 32 -webkit

3.2 -webkit

50.0

on display: table-caption

(Yes)

?

(Yes)

37.0 (37)

(Yes)

(Yes)

(Yes)

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com