diff --git a/files/zh-cn/web/css/column-span/index.md b/files/zh-cn/web/css/column-span/index.md index 35ac6630446ac5..482c262c627440 100644 --- a/files/zh-cn/web/css/column-span/index.md +++ b/files/zh-cn/web/css/column-span/index.md @@ -3,52 +3,82 @@ title: column-span slug: Web/CSS/column-span --- -{{ CSSRef("CSS Multi-columns") }} +{{CSSRef}} -## 概述 +[CSS](/zh-CN/docs/Web/CSS) 属性 **`column-span`** 的值被设置为 `all` 时,可以让一个元素跨越所有的列。 -[CSS](/zh-CN/docs/CSS) 属性`column-span` 的值被设置为`all`时,可以让一个元素跨越所有的列。一个跨越多列的元素被称为**spanning element。** +{{EmbedInteractiveExample("pages/css/column-span.html")}} -{{cssinfo}} - -## 语法 - -``` -Formal syntax: {{csssyntax("column-span")}} -``` - -``` +```css +/* 关键字值 */ column-span: none; column-span: all; +/* 全局值 */ column-span: inherit; +column-span: initial; +column-span: revert; +column-span: revert-layer; +column-span: unset; ``` +一个跨越多列的元素被称为**跨越元素**(spanning element)。 + +## 语法 + +`column-span` 属性可以被指定为下面列出的关键字值之一。 + ### 取值 - `none` - : 元素不跨多个列。 - `all` - - : 元素横跨所有列。元素出现之前,出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的块格式上下文。 + - : 元素横跨所有列。元素出现之前,出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的区块格式化上下文。 + +## 形式定义 + +{{cssinfo}} + +## 形式语法 + +{{csssyntax}} ## 示例 -下例中的 h2 元素横跨 article 元素中的各列 +### 使标题跨越列 -### HTML +在该示例中,标题跨越了文章中的所有列。 -``` +#### HTML + +```html
-

My Very Special Columns

-

This is a bunch of text split into three columns - using the CSS `columns` property. The text - is equally distributed over the columns.

+

这是一个跨越了所有的列的标题

+

+ h2 元素应该跨越所有列。文本的其余内容应该分布在各列中。 +

+

+ 这是一些使用 CSS `columns` + 属性分成三列的文本。文本在各列中均匀分布。 +

+

+ 这是一些使用 CSS `columns` + 属性分成三列的文本。文本在各列中均匀分布。 +

+

+ 这是一些使用 CSS `columns` + 属性分成三列的文本。文本在各列中均匀分布。 +

+

+ 这是一些使用 CSS `columns` + 属性分成三列的文本。文本在各列中均匀分布。 +

``` -### CSS +#### CSS -``` +```css article { columns: 3; } @@ -58,9 +88,9 @@ h2 { } ``` -### 结果 +#### 结果 -{{EmbedLiveSample('示例', 'auto', 120)}} +{{EmbedLiveSample('使标题跨越列', 'auto', 260)}} ## 规范 @@ -69,3 +99,8 @@ h2 { ## 浏览器兼容性 {{Compat}} + +## 参见 + +- [行级元素](/zh-CN/docs/Web/HTML/Inline_elements) +- {{domxref("HTMLSpanElement")}}