ss 中可以輕松地實現類似報紙上的文字多列排版效果，不需要使用其它技術（如float、flex等）。如下圖：

在本章中，您將了解以下多列屬性：

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

創建多列文本

使用column-count屬性指定一個元素應該分成幾列，如下示例：

div {
  column-count: 3;
}

效果：

設置列之間的間隙

使用 column-gap 屬性指定列之間的間隙，如下示例：

div {
  column-gap: 50px;
}

效果：

設置列樣式

column-rule-style屬性指定列之間分割線的樣式，語法如下：

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

如下示例：

div {
  column-rule-style: solid;
}

效果：

column-rule-width 屬性指定列之間的分割線寬度，如下示例：

div{
column-rule-width: 10px;
}

效果：

column-rule-color屬性指定列之間分割線的顏色，如下示例：

div {
  column-rule-color: lightblue;
}

效果：

使用column-rule屬性設置上述所有 column-rule-* 屬性的簡寫，如下示例：

div {
  column-rule: 10px solid lightblue;
}

指定一個元素跨越多少列

column-span屬性指定一個元素應該跨越多少列，語法如下：

column-span: none|all|initial|inherit;

如下示例：

html：

<div>
<h2>標題</h2>
文本....
</div>

css:

div{
	column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}

沒有使用跨列時：

如上圖中標題部分顯示在第一列中，如果想讓標題橫跨整行可以使用如下代碼：

h2 {
  column-span: all;
}

效果：

指定列寬

column-width屬性為列指定最佳的寬度，內容會自動根據頁面大小調整，語法如下:

column-width: auto|length|initial|inherit;

如下示例：

div{
	column-width: 100px;
}

效果：

columns 屬性

columns 指定每列的最小寬度和最大列數，其語法如下：

columns: column-width column-count;

column-width 部分將定義每列的最小寬度，而 column-count 部分將定義最大列數。通過使用此屬性，瀏覽器將自動分解多列布局為窄寬度的單列，無需媒體查詢或其他規則。

如下示例：

div{
columns: 100px 3;
}

效果：

注意這里和column-width: 100px的區別，它不會根據寬度自動調整列數，且列最大為3列。

　好程序員web前端培訓分享之HTMLCSS學習筆記css3-多列，多列布局類似報紙或雜志中的排版方式，主要用以控制大篇幅文本。

多列屬性

1、column-count

屬性規定元素應該被分隔的列數

適用于：除table外的非替換塊級元素, table cells, inline-block元素

2、column-gap

屬性規定列之間的間隔大小

3、column-rule

設置或檢索對象的列與列之間的邊框。復合屬性。

column-rule-color規定列之間規則的顏色。

column-rule-style規定列之間規則的樣式。

column-rule-width規定列之間規則的寬度。

4、column-fill

設置或檢索對象所有列的高度是否統一

auto：列高度自適應內容

balance：所有列的高度以其中最高的一列統一

5、column-span

設置或檢索對象元素是否橫跨所有列。

none：不跨列

all：橫跨所有列

6、column-width

設置或檢索對象每列的寬度

7、columns

設置或檢索對象的列數和每列的寬度。復合屬性

<' column-width '> || <' column-count '>

注：Internet Explorer 10 和 Opera 支持多列屬性。