模板:Div col/doc

星臣讨论 | 贡献2017年1月17日 (二) 02:20的版本 (创建页面,内容为“本模板用于将一段内容分为数段,你也可以通过设置参数<code>|small=</code>来获得更小的字体,设置参数<code>|rules=</code>来设置...”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

本模板用于将一段内容分为数段,你也可以通过设置参数|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

需要注意的是,命名参数不能用非命名参数的形式使用,否则会失效或出错。