模板:Columns-list
本模板用于在条目中将内容分成多列。
它基于 Template:Reflist,两者的区别是这里显示的内容需手动输入而不是来自引用来源列表。
由于本模板自适应能力很强,你甚至可以用它布局页面。
本模板使用了CSS3的多栏布局效果。
多列只有在Internet Explorer版本10及以上、Opera11.1及以上、Safari版本3及以上、Mozilla Firefox版本1.5及以上、Google Chrome等浏览器上才能正确渲染,不支持的浏览器会始终显示单列且不会混乱。Internet Explorer版本9及以下不支持列选择器。
用法
{{Columns-list
|理想列数
|width=
|内容
|content=
|gap=
|rcolor=
|rstyle=
|rwidth=
|css=
}}
理想列数:默认为2,你也可以填写其他阿拉伯数字指定理想列数(“理想”意为当条件不允许时列数不一定会按照设定显示)。如果你不想使用本参数可以将参数值改为“auto”。width:指定每列理想宽度(“理想”意为当条件不允许时宽度可能会自动缩放),参数值为“阿拉伯数字+单位(如px、em等)”。如果你不想使用本参数可以将参数值改为“auto”,或者直接删掉本参数。
理想列数与width一般二选一即可,当它们同时存在时以最小的为准。如页面宽度800px,理想列数为3,width=200px,则因为理想列数=3<width=800/200=4,所以最终列数为3。
内容:一般是列表,也可以是图片等其他任何东西。默认值是理想列数的值。- 当你需要在内容中使用HTML元素时,请使用
content,然后在content=后填写你的内容。此时内容无效。 
- 当你需要在内容中使用HTML元素时,请使用
 
- 以下为可选参数:
 
gap:指定列与列之间的间距,参数值为“阿拉伯数字+单位(如px、em等)”,默认值为1em。rcolor:指定分割线颜色,参数值为颜色值。rstyle:指定分割线样式:
参数值 显示(仅供参考) 方点 dotted 
虚线 dashed 
竖线 solid 
双线 double 
rwidth:指定分割线宽度,参数值为“阿拉伯数字+单位(如px、em等)”或thin(相当于1px)、medium(相当于3px)、thick(相当于5px)。css:添加额外的css属性。
范例
{{Columns-list|2|
* [[George Washington]]
* [[John Adams]]
* [[Thomas Jefferson]]
* [[James Madison]]
* [[James Monroe]]
}}
{{Columns-list|width=300px|rcolor=black|rstyle=dashed|rwidth=medium|gap=200px|
* [[George Washington]]
* [[John Adams]]
* [[Thomas Jefferson]]
* [[James Madison]]
* [[James Monroe]]
}}
(如果你只看到一列,那么说明你的页面窗口有些窄,电脑端可以通过缩小页面比例来看到更多列。)
- 可以添加 CSS 样式,例如:
 - 推荐:
 
{{Columns-list|2|css=font-weight:bold;font-style:italic|
* [[New York, I Love You]]
* [[Hōtai Club]]
* [[The Kon Ichikawa Story]]
* [[Rainbow Song]]
* [[Hana and Alice|Hana & Alice]]
* [[All About Lily Chou-Chou]]
* [[April Story]]
* [[Swallowtail Butterfly (film)|Swallowtail Butterfly]]
* [[Picnic (1996 film)|Picnic]]
* [[Fried Dragon Fish]]
}}
- 不推荐(记得在行数后加英文分号):
 
{{Columns-list|2;font-weight:bold;font-style:italic|
* [[New York, I Love You]]
* [[Hōtai Club]]
* [[The Kon Ichikawa Story]]
* [[Rainbow Song]]
* [[Hana and Alice|Hana & Alice]]
* [[All About Lily Chou-Chou]]
* [[April Story]]
* [[Swallowtail Butterfly (film)|Swallowtail Butterfly]]
* [[Picnic (1996 film)|Picnic]]
* [[Fried Dragon Fish]]
}}
- 内容布局实例(注意观察在不同尺寸窗口下下面内容排版的变化):
 
{{Columns-list|auto|width=200px|gap=2px|content=
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[AAA]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[BBB]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[CCC]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[DDD]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[EEE]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[FFF]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[GGG]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[HHH]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[III]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">[[JJJ]]</div>
<div style="margin-bottom:2px;break-inside:avoid;text-align:center;border:1px solid #1E90FF;">待补……</div>
}}
参考
{{Reflist}}
                
                    沪公网安备 31011002002714 号