模板:Div col

模板文檔  

這個文檔嵌入自Template:Div col/doc。

本模板用於將一段內容分為數段，你也可以通過設置參數|small=來獲得更小的字體，設置參數|rules=來設置列與列間的分隔線，以及通過參數|style=來自定義其他css屬性。

適用版本

CSS3多列屬性的瀏覽器使用情況

屬性	Internet Explorer	Firefox	Safari	Chrome	Opera
column-width column-count	≥ 10 (2012)	≥ 1.5 (2005)	≥ 3 (2007)	≥ 1 (2008)	≥ 11.1 (2011)
columns	≥ 10 (2012)	≥ 9 (2011)	≥ 3 (2007)	≥ 1 (2008)	≥ 11.1 (2011)

參數

主要使用的參數有：

• |cols=或者第一個未命名參數。確定內容被劃分的最佳列數，默認值為2（這個參數是根據換行符號來判斷的，只有內容為多行才能發揮作用，如果為單行則不劃分，並且有可能使內容超出屏幕並消失，故需謹慎）。

不建議使用這個參數，因為下面的參數 colwidth 在不同解析度的顯示屏上表現更好

• |colwidth=或者第二個未命名參數。規定每列的最小寬度，並基於此自動劃分列數。在解析度越大的顯示屏上，顯示的列數越多。其會覆蓋掉參數 cols 的作用。適用於任何css單位，比如em。
• |rules=在列之間添加分隔線，你也可以自定義分隔線的屬性，比如1px dashed blue;（記得帶半角分號）。
• |gap=設置相鄰兩列間的列間距，同樣適用於任何css單位，默認值為1em。
• |style=增加其他的CSS屬性（同樣，記得用半角分號分隔屬性）。
• |content=你想分列的內容。
• |small=輸入yes時，會縮小其中的字體。

例子

1.不使用參數

{{Div col|content=
* a
* b
* c
* d
* e
* f
* g
* h}}

會被自動分為兩列。

• a
• b
• c
• d
• e
• f
• g
• h

2.使用命名參數（推薦）

{{Div col|colwidth=10em|rules=yes|gap=2em|small=yes|content=
* a
* b
* c
* d
* e
* f
* g
* h}}

以及

{{Div col|rules=3px dashed blue;|gap=3em|small=|colwidth=10em|content=
* a
* b
* c
* d
* e
* f
* g
* h}}

結果為

• a
• b
• c
• d
• e
• f
• g
• h

和

• a
• b
• c
• d
• e
• f
• g
• h

3.使用非命名參數

{{div col|3||content=
* a
* b
* c
* d
* e
* f
* g
* h}}

結果為

• a
• b
• c
• d
• e
• f
• g
• h

4.混用參數

{{div col||10em|rules=yes|gap=2em|content=
* a
* b
* c
* d
* e
* f
* g
* h}}

結果為

• a
• b
• c
• d
• e
• f
• g
• h

需要注意的是，命名參數不能用非命名參數的形式使用，否則會失效或出錯。