模板:Div col

50px 模板文档  

这个文档嵌入自模板: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

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