From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../basic_concepts_of_multicol/index.html | 91 +++++++++++++++ .../handling_overflow_in_multicol/index.html | 49 ++++++++ files/zh-cn/web/css/css_columns/index.html | 127 +++++++++++++++++++++ 3 files changed, 267 insertions(+) create mode 100644 files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html create mode 100644 files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html create mode 100644 files/zh-cn/web/css/css_columns/index.html (limited to 'files/zh-cn/web/css/css_columns') diff --git a/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html new file mode 100644 index 0000000000..8ec7379cb5 --- /dev/null +++ b/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -0,0 +1,91 @@ +--- +title: Basic Concepts of Multicol +slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +--- +
{{CSSRef}}
+ +

多列布局（通常称为multicol）是一种规范，用于将内容布置到一组列框中，就像报纸中的列一样。本指南解释了规范如何与一些常见的用例示例一起使用。

+ +

关键概念和术语

+ +

 

+ +

Multicol与CSS中的任何其他布局方法不同，它将内容（包括所有后代元素）分段为列。这与在使用CSS Paged Media时将内容分段为页面的方式相同，例如通过创建打印样式表。

+ +

规范定义的属性有：

+ + + +

通过给一个元素添加 column-count 或 column-width,该元素变成了多列容器,或简称为 multicol 容器。这些列是都是匿名的盒子，在规范中描述为列盒子。

+ +

columns 定义

+ +

创建一个 multicol 容器必须使用至少一个 column-* 属性,这些就是 column-count 和 column-width。

+ +

column-count 属性

+ +

column-count 属性指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。

+ +

在以下示例中,我们使用 column-count 属性在.container 元素上创建三列 。.container 元素的内容包括其子元素都会分裂成三列。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

在上面的例子中内容被段落 p 标签的默认样式包裹。因此,每段都有一个间距。你可以看到这个间距引起第一行文本被推了下来。这是因为 multicol 容器创建了一个新的块格式化上下文（BFC)，这意味着子元素的间距不会与父容器的间距互相重叠。

+ +

 column-width 属性

+ +

column-width 属性用于给每列设置一个最佳宽度。如果你声明 column-width,浏览器将算出 该宽度在multicol 容器能分多少列，并且把额外的的空间填充到这些列当中。因此,应将列宽视为最小宽度,因为由于额外的空间，列可能而更宽。

+ +

当单个列的可用宽度小于 column-width 的值的情况下，列的宽度会缩小为小于所声明的列宽。

+ +

在以下示例中，我们使用 column-width 属性值为200 px。但最终为了适配容器，列的宽度却大于200像素，额外的空间被平均分配了。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

+ +

同时使用 column-count 和 column-width 

+ +

如果在 multicol 容器上指定这两个属性，则 column-count 将作为最大列数。因此，将按column-width 的值计算，直到达到 column-count 定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不再绘制，并且额外空间在现有列之间均匀分布。

+ +

同时使用这两个属性时，可能会获得的列数少于 column-count 数值中指定的列数。

+ +

在下一个例子中，我们使用 column-width 的值为 200px，column-count 的值为 2。即使有超过两列的空间，我们也得到两个。如果没有足够的空间容纳两列 200px，我们得到一个。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

+ +

columns 缩写

+ +

您可以使用 columns 缩写来设置 column-count 和 column-width。如果设置长度单位，这将用于 column-width，设置一个整数，它将用于 column-count。您可以设置两者，用空格分隔这两个值。

+ +

此 CSS 结果与示例1相同，column-count 设置为3。

+ +
.container {
+  columns: 3;
+}
+ +

此 CSS 结果与示例2相同，column-width 为200px。

+ +
.container {
+  columns: 200px;
+}
+ +

此 CSS 结果与示例3相同，同时设置 column-count 和 column-width。

+ +
.container {
+  columns: 2 200px;
+}
+ +

下一步

+ +

在本指南中，我们学习了多列布局的基本用法。在下一个指南中，我们将看看我们可以为列本身设置多少样式。

diff --git a/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html new file mode 100644 index 0000000000..886a661776 --- /dev/null +++ b/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -0,0 +1,49 @@ +--- +title: 处理 Multicol 中的溢出 +slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +tags: + - CSS + - Guide + - Layout + - multi-column +translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +--- +
{{CSSRef}}
+ +

在本指南中，我们将了解 multicol 如何处理溢出，包括在列框内以及内容超出容器容量的情况。

+ +

column boxes 内部溢出

+ +

当子项的大小大于列框时，就会发生溢出。例如，当列中的图像宽度大于 column-width 值或 column-count 声明的列数禅城的列宽度时，就可能会发生这种情况。

+ +

在这种情况下，内容溢出（并且是可见的）到下一列，而不是被列框裁切。你可以在下面的示例中看到，在编写本文时，浏览器以不同的方式处理预期的呈现图像。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+ +

+ +

如果你想要一个图像尺寸缩小到适合列框，标准的响应式的解决方案是设置最大宽度:100%。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+ +

更多的列

+ +

如何处理溢出的列取决于是在一个片段化的媒体上下文（比如打印）中，还是在一个连续的媒体上下文（比如 web 页面）中。

+ +

在一个片段化的媒体中，一旦碎片（例如页面）中充满了列，多出的列将移至新页面。 在连续介质中，列将沿横向溢出。 在 web 上，这意味着水平滚动条的出现。

+ +

下面的示例显示了这种溢出行为。multicol 容器有一个高度，列的文本多于空间，因此多出的列会在容器外面出现。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+ +

本规范的未来版本中，会允许横向溢出的列向下排列，用户能向下滚动鼠标查看溢出的列。

+ +

使用纵向的媒体查询

+ +

multicol 在 web 上的一个问题：如果你的列比 viewport 高，读者需要上下滚动来阅读，这样的用户体验不好。避免这种情况的一种方法是，只有在有足够的高度时才应用列属性。

+ +

在下面的示例中，我们使用了 min-height。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+ +

在本系列的最后一篇指南中，我们将看到片段化下的 Muticol 如何使用的规范，去控制列内容的溢出。

diff --git a/files/zh-cn/web/css/css_columns/index.html b/files/zh-cn/web/css/css_columns/index.html new file mode 100644 index 0000000000..d9492d2552 --- /dev/null +++ b/files/zh-cn/web/css/css_columns/index.html @@ -0,0 +1,127 @@ +--- +title: CSS 多列布局 +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS参考 + - NeedsTranslation + - Overview + - TopicStub + - 概述 +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef("CSS3 Multicol")}}
+ +

CSS多列布局（CSS Multi-column Layout）是一种定义了多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）。

+ +

基本示例

+ +

在下列示例中，{{cssxref("column-count")}}属性应用于带有容器类的元素。因为column-count的值为3，所以内容排成等宽的3列。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

Relationship to Fragmentation

+ +

Multiple-column Layout is closely related to Paged Media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore the properties now defined in the CSS Fragmentation specification are required in order to control how content breaks between columns. 

+ +

参考

+ +

多列布局属性

+ +
+ +
+ +

有关的CSS碎片化属性

+ +
+ +
+ +

指南

+ +
+
多列的基本概念
+
多列布局的概述
+
设置列的样式
+
如何使用列的分隔线，以及设置列间距。
+
Spanning and Balancing
+
How to make elements span across all columns and controlling the way columns are filled.
+
Handling Overflow in Multicol
+
What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.
+
Content Breaks in Multicol
+
Introduction to the Fragmentation specification and how to control where column content breaks.
+
+ + + +

规范

+ + + + + + + + + + + + + + + + +
指定状态注释
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}初始定义
+ +
+ + + + + + + + + + + + + + + + + + + +
+ +

+ +

参见

+ +

其它CSS布局方法包括：

+ + + +
+
+
-- cgit v1.2.3-54-g00ecf