模板:Columns-list
(重新導向自Template:Cmn)
跳至導覽
跳至搜尋
本模板全部或部分內容原來自中文維基百科頁面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=
後填寫你的內容。此時内容
無效。
- 當你需要在內容中使用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}}
|