html中如何多列布局,CSS3 多列布局

CSS3 多列布局

使用CSS3，您可以将元素的文本内容分成多列。

创建多列布局

CSS3引入了多列布局模块，用于以简单有效的方式创建多个列布局。现在，您无需使用浮动框即可创建像在杂志和报纸上看到的布局。这是一个使用CSS3多列布局功能将一些文本分为三列的简单示例。

示例p {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

}测试看看‹/›

设置列数或宽度

CSS属性，column-count和column-width指定是否以及将显示多少列。column-count属性设置multicol元素内的列数，而column-width属性设置所需的列宽。

示例p {

-webkit-column-width: 150px; /* Chrome, Safari, Opera */

-moz-column-width: 150px; /* Firefox */

column-width: 150px;

}测试看看‹/›

注：column-width指定了列的最佳宽度。 但是，实际列宽可能会根据可用空间而变宽或变窄。 此属性不应与column-count属性一起使用。。

设置列间隙

您可以使用该column-gap属性指定列之间的间隔。每列之间应用相同的间隙。默认间隔是normal，它等于1em。

示例p {

/* Chrome, Safari, Opera */

-webkit-column-count: 3;

-webkit-column-gap: 100px;

/* Firefox */

-moz-column-count: 3;

-moz-column-gap: 100px;

column-count: 3;

column-gap: 100px;

}测试看看‹/›

设置列规则

您也可以使用column-rule属性在各列之间添加一条线，即规则。它是用于在单个声明中设置规则的宽度，样式和颜色的简写属性。该column-rule属性采用与border和outline相同的值。

示例p {

/* Chrome, Safari, Opera */

-webkit-column-count: 3;

-webkit-column-gap: 100px;

-webkit-column-rule: 2px solid red;

/* Firefox */

-moz-column-count: 3;

-moz-column-gap: 100px;

-moz-column-rule: 2px solid red;

column-count: 3;

column-gap: 100px;

column-rule: 2px solid red;

}测试看看‹/›

注意：列规则的宽度不会影响列框的宽度，但是如果列规则的宽度大于间隙，则相邻的列框将与该规则重叠。

CSS3多列属性

下表简要概述了所有多列属性：