模板:Div col

勤求古訓,博采眾方
於 2022年5月3日 (二) 23:57 由 入我相思门留言 | 貢獻 所做的修訂 (创建页面,内容为“<includeonly><templatestyles src="Div col/styles.css"/><!-- --><div class="div-col {{#ifeq:{{{small|}}}|yes|div-col-small}} {{#ifeq:{{{rules|}}}|yes|div-col-rules}} {{{class|}}}" <!-- -->{{#if:{{{colwidth|{{{2|}}}}}}{{{cols|{{{1|}}}}}}{{{gap|}}}{{{style|}}}|<!-- -->style="{{#if:{{{colwidth|{{{2|}}}}}}{{{cols|{{{1|}}}}}}|column-width:{{#if:{{{cols|{{{1|}}}}}}|{{{colwidth|{{{2|auto}}}}}}|{{{colwidth|{{{2|}}}}}}}}; column-count:{{#if:{{{colwidth|{{{2|}}}}}}|{{{col…”)
(差異) ←上個修訂 | 最新修訂 (差異) | 下個修訂→ (差異)
文件圖示 模板文件[檢視] [編輯] [歷史] [清除快取]
本模板使用了CSS3的多欄布局效果
支援該效果的瀏覽器如下表,
不支援的會始終顯示單欄但不會混亂
屬性 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)
break-before
break-after
break-inside
≥ 10
(2012)
≥ 65
(2019)
≥ 10
(2016)
≥ 65
(2016)
≥ 15
(2013)

該模版把列表分成多列。可以選擇縮小字體。

使用方式

參數

cols =
指定列數。預設=1。
colwidth =
指定列的寬度,然後顯示時根據螢幕寬度動態設定列數;越寬的螢幕顯示的列數越多。這個參數優於cols=設定。
small =
如果設為yes,指定使用小字體(90%)。預設="no"。
style =
指定任意自定義格式。

範例一

{{Div col}}
* a
* b
* c
* d
{{Div col end}}
顯示
  • a
  • b
  • c
  • d

範例二

{{Div col|cols=4|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
顯示
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

範例三

{{Div col|colwidth=10em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
顯示
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

另見