模板:Columns-list

模板文檔 [查看] [編輯] [歷史] [刷新]

這個文檔嵌入自Template:Columns-list/doc。

本模板全部或部分內容原來自中文維基百科頁面Template:Columns-list，依 CC BY-SA 3.0 授權引入；原貢獻者可以在這裏看到。經過雙方編者的修改，本模板可能已與來源有很大差異。

本模板用於在條目中將內容分成多列。

它基於 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=後填寫你的內容。此時内容無效。

以下為可選參數：

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>
}}

待補……