置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:Columns-list

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
(重新導向自Template:Cmn
跳至導覽 跳至搜尋
Template-info.svg 模板文檔  [查看] [編輯] [歷史] [刷新]

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

它基於 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>
}}
待補……

重新導向

參見

參考

{{Reflist}}