整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ss 中可以輕松地實(shí)現(xiàn)類似報(bào)紙上的文字多列排版效果，不需要使用其它技術(shù)（如float、flex等）。如下圖：
默認(rèn)效果
多列顯示效果
在本章中，您將了解以下多列屬性：
使用column-count屬性指定一個(gè)元素應(yīng)該分成幾列，如下示例：
div {
column-count: 3;
}效果：
3列顯示
使用 column-gap 屬性指定列之間的間隙，如下示例：
div {
column-gap: 50px;
}效果：
每列間隔50px
column-rule-style屬性指定列之間分割線的樣式，語(yǔ)法如下：
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;
}效果：
淡藍(lán)色分割線
使用column-rule屬性設(shè)置上述所有 column-rule-* 屬性的簡(jiǎn)寫，如下示例：
div {
column-rule: 10px solid lightblue;
}column-span屬性指定一個(gè)元素應(yīng)該跨越多少列，語(yǔ)法如下：
column-span: none|all|initial|inherit;如下示例：
html：
<div>
<h2>標(biāo)題</h2>
文本....
</div>css:
div{
column-count: 3;
column-gap: 40px;
column-rule: 1px solid lightblue;
}沒有使用跨列時(shí)：
如上圖中標(biāo)題部分顯示在第一列中，如果想讓標(biāo)題橫跨整行可以使用如下代碼：
h2 {
column-span: all;
}效果：
標(biāo)題夸所有列
column-width屬性為列指定最佳的寬度，內(nèi)容會(huì)自動(dòng)根據(jù)頁(yè)面大小調(diào)整，語(yǔ)法如下:
column-width: auto|length|initial|inherit;如下示例：
div{
column-width: 100px;
}效果：
columns 指定每列的最小寬度和最大列數(shù)，其語(yǔ)法如下：
columns: column-width column-count;column-width 部分將定義每列的最小寬度，而 column-count 部分將定義最大列數(shù)。通過(guò)使用此屬性，瀏覽器將自動(dòng)分解多列布局為窄寬度的單列，無(wú)需媒體查詢或其他規(guī)則。
如下示例：
div{
columns: 100px 3;
}效果：
注意這里和column-width: 100px的區(qū)別，它不會(huì)根據(jù)寬度自動(dòng)調(diào)整列數(shù)，且列最大為3列。
文作為一個(gè)純CSS3實(shí)現(xiàn)網(wǎng)格的示例，在不使用table標(biāo)簽，僅僅利用div標(biāo)簽及flex布局，用flexbox及相關(guān)屬性來(lái)實(shí)現(xiàn)一個(gè)帶有表頭和頁(yè)眉的跨行、跨列的表格。
廢話不多講，直接上代碼：
CSS代碼如下：
HTML代碼如下：
效果圖如下：
好程序員web前端培訓(xùn)分享之HTMLCSS學(xué)習(xí)筆記css3-多列，多列布局類似報(bào)紙或雜志中的排版方式，主要用以控制大篇幅文本。
1、column-count
屬性規(guī)定元素應(yīng)該被分隔的列數(shù)
適用于：除table外的非替換塊級(jí)元素, table cells, inline-block元素
2、column-gap
屬性規(guī)定列之間的間隔大小
3、column-rule
設(shè)置或檢索對(duì)象的列與列之間的邊框。復(fù)合屬性。
column-rule-color規(guī)定列之間規(guī)則的顏色。
column-rule-style規(guī)定列之間規(guī)則的樣式。
column-rule-width規(guī)定列之間規(guī)則的寬度。
4、column-fill
設(shè)置或檢索對(duì)象所有列的高度是否統(tǒng)一
auto：列高度自適應(yīng)內(nèi)容
balance：所有列的高度以其中最高的一列統(tǒng)一
5、column-span
設(shè)置或檢索對(duì)象元素是否橫跨所有列。
none：不跨列
all：橫跨所有列
6、column-width
設(shè)置或檢索對(duì)象每列的寬度
7、columns
設(shè)置或檢索對(duì)象的列數(shù)和每列的寬度。復(fù)合屬性
<' column-width '> || <' column-count '>
注：Internet Explorer 10 和 Opera 支持多列屬性。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
