多列布局Windows.doc

Internet Explorer 10 及适用于 Windows 8 的使用 JavaScript 的 Windows 应用商店应用引入了 CSS 多列布局模块支持。截止到编写本文档时，多列布局模块是一个候选的万维网联合会 (W3C) 推荐标准。使用多列布局功能可以将内容分流至多个列中，这些列之间保持一定的间距和可选隔线。该功能还可以让你根据浏览器窗口的大小来更改列的数量。 多列元素由 W3C 定义为一种元素，该元素的 column-width 或 column-count 属性不设置为 auto，因此充当多列布局的容器。多列布局引入了列框，它被定义为一种介于内容框与内容之间的新类型的容器。列框中包含一些行，这些行按多列元素的方向排序。每个列框都具有列高度和列宽度。相邻的列框之间具有列间距，可选择包含列隔线。 有关级联样式表级别 3 (CSS3) 多列布局的实例演示，请参阅 IE Test Drive 上的实例演示：多列布局。 本主题包含下列部分： 指定列宽度和数量 指定列间距和列隔线 指定分列 指定列跨越 平衡列内容 相关主题 指定列宽度和数量 你必须至少为多列元素内的列指定宽度。Internet Explorer 10 将在浏览器窗口中显示尽可能多的列，且列的宽度不小于你所指定的值。要指定列的宽度，请使用以下属性： 属性 描述 column-width 为多列元素内的列指定最佳的宽度。 该属性的可能值如下所示： auto 指示最佳的列宽度由多列元素的其他属性值来决定，例如，column-count 属性。这是默认值。 length 在 CSS 值和单位参考中指定的相对或绝对长度值。 例如，以下选择器已经添加了列宽度属性并将其设置为 200 像素：这意味着 Internet Explorer 10 将使用尽可能多的 200 像素或更宽的列来填充浏览器窗口。 CSS 复制 style type=text/css #multicol1 { column-width: 200px; } /style 你可以查看此选择器应用到大型文本块时的情况。（Internet Explorer 10 或与不带前缀的 CSS3 多列属性兼容的浏览器是让该页面正确呈现所必需的。） 你还可以指定多列元素应该包含的列数。要指定列的数量，请使用以下属性： 属性 描述 column-count 为多列元素内的列指定最佳的数量。 该属性的可能值如下所示： auto 指示最佳的列数由多列元素的其他属性值来决定，例如，column-width 属性。这是默认值。 integer 指定列的数量。 例如，以下选择器已经添加了 column-count 属性并将其设置为 2。这意味着 Internet Explorer 10 将用两列来填充浏览器窗口。 CSS 复制 style type=text/css #multicol1 { column-count: 2; } /style 你可以查看此选择器应用到大型文本块时的情况。（Internet Explorer 10 或与不带前缀的 CSS3 多列属性兼容的浏览器是让该页面正确呈现所必需的。） 列的宽度和数量也可使用以下速记属性来表示： 属性 描述 columns 为多列元素的 column-width 和 column-count 属性指定值的速记值。 该属性的语法如下所示： columns: column-width column-count; 以下语法也是有效的： columns: column-count column-width; 如果仅指定整数，则将 column-width 设置为 auto 并将 column-count 设置为整数。如果仅指定长度值，则将 column-width 设置为长度值并将 column-count 设置为 auto。如果仅指定 auto，则将 column-width 和 column-count 都设置为 auto。 例如，以下选择器中添加了 columns 属性并将其设置为等于 auto 12em。这表示该多列元素的 column-width 为 12 em，column-count 为 auto。 CSS 复制 style type=text/css #multicol3 { columns: auto 12em; } /style 你可以查看此选择器应用到大型文本块时的情况。（Internet Explorer 10 或与不带前缀的 CSS3 多列属性兼容的浏览器是让该页面正确呈现所必需的。） 指定列间距和列隔线 列间距和列隔线位于多列元素内的列之间的位置，且不超出该多列元素的长度。列间距在相邻列之间创建空间以便于阅读。列隔