“模板:Div col”的版本间的差异
来自希灵百科
(创建页面,内容为“<includeonly><div class="div-col columns <!-- -->{{#if: {{{colwidth|{{{2|}}}}}} | column-width | column-count column-count-{{{cols|{{#if:1|{{{1|2}}}}}}}} }}...”) |
(没有差异)
|
2017年1月17日 (二) 02:20的最新版本
本模板用于将一段内容分为数段,你也可以通过设置参数|small=
来获得更小的字体,设置参数|rules=
来设置列与列间的分隔线,以及通过参数|style=
来自定义其他css属性。
适用版本
属性 | 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) |
参数
主要使用的参数有:
或者第一个未命名参数。确定内容被划分的最佳列数,默认值为2(这个参数是根据换行符号来判断的,只有内容为多行才能发挥作用,如果为单行则不划分,并且有可能使内容超出屏幕并消失,故需谨慎)。|cols=
- 不建议使用这个参数,因为下面的参数 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
需要注意的是,命名参数不能用非命名参数的形式使用,否则会失效或出错。