整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ss 中可以輕松地實現類似報紙上的文字多列排版效果，不需要使用其它技術（如float、flex等）。如下圖：
默認效果
多列顯示效果
在本章中，您將了解以下多列屬性：
使用column-count屬性指定一個元素應該分成幾列，如下示例：
div {
column-count: 3;
}效果：
3列顯示
使用 column-gap 屬性指定列之間的間隙，如下示例：
div {
column-gap: 50px;
}效果：
每列間隔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;
}效果：
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: column-width column-count;column-width 部分將定義每列的最小寬度，而 column-count 部分將定義最大列數。通過使用此屬性，瀏覽器將自動分解多列布局為窄寬度的單列，無需媒體查詢或其他規則。
如下示例：
div{
columns: 100px 3;
}效果：
注意這里和column-width: 100px的區別，它不會根據寬度自動調整列數，且列最大為3列。
么是三列布局
三列布局一般情況下是指三列中左邊兩列是確定的寬度, 右邊一列是自動填滿剩余所有空間的一種布局效果
三列布局實現方式
float + margin 屬性配合使用
float + overflow 屬性配合使用
display 屬性的 table 相關值使用
一列固定寬度，另一列自適應寬度
如下圖所示：第一列固定寬度200px，第二列自適應。
代碼
效果
使用flex布局的寫法
代碼
效果同上
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
