置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板: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

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