CSS3多列布局允许你将文本内容分为多个列，使得文本在屏幕上更加整齐。以下是一些CSS3多列布局的基本用法：
/* 基本语法 */
.element {
  column-count: number; /* 列数 */
  column-width: length; /* 列宽 */
  column-gap: length; /* 列之间的间隔 */
  column-rule: column-rule-width column-rule-style column-rule-color; /* 列规则（可选） */
}

/* 示例 */
.container {
  column-count: 3;
  column-width: 200px;
  column-gap: 20px;
  column-rule: 2px solid #ccc;
}

  •  column-count（列数）： 指定要分割成的列数。

  •  column-width（列宽）： 指定每一列的宽度。

  •  column-gap（列之间的间隔）： 指定列与列之间的间隔距离。

  •  column-rule（列规则，可选）： 用于设置列之间的规则线，包括宽度、样式和颜色。


示例：
/* 分为三列，每列宽度为200px，列之间间隔20px，规则线为2px实线灰色 */
.container {
  column-count: 3;
  column-width: 200px;
  column-gap: 20px;
  column-rule: 2px solid #ccc;
}

这将把包含在.container元素内的文本内容分为三列，每列宽度为200px，列与列之间有20px的间隔，同时列之间有2px的实线灰色规则线。

多列布局适用于一些特定的文本排版需求，例如报纸、杂志等。在使用时，你可以根据具体的设计和排版要求调整列数、宽度、间隔等参数。请注意，多列布局在不同浏览器上的支持可能会有差异，因此在实际应用中需要进行兼容性测试。


转载请注明出处：http://www.zyzy.cn/article/detail/4066/CSS