查看“模板:Stack/doc”的源代码

本模板可以用来帮助萌娘百科条目上面的图像布局调整到合适位置，如果有人对图像的布局觉得不满，遇到诡异的排版问题就可以试试这个模板。
__NOTOC__
== 用法 ==

最简单的方式：
<pre style="overflow:auto;">
{{stack|<objects>}}
</pre>

另一种方式，使用 {{tld|stack begin}} 和 {{tld|stack end}}：
<pre style="overflow:auto;">
{{stack begin}}
<objects>
{{stack end}}
</pre>

<code><object></code> 可以是许多图片或者模板。

===可选参数===
:<code>-{}-<nowiki>{{</nowiki>stack| <objects> | float=left/'''right''' | clear=true/'''false'''<nowiki>}}</nowiki></code>
或者
:<code>-{}-<nowiki>{{</nowiki>stack begin | float=left/'''right''' | clear=true/'''false'''<nowiki>}}</nowiki></code>
其中
:*<code>float=</code> ''left'' 或者 ''right''（默认是 '''right'''）
:*: 用来决定在左侧或右侧叠放
:*<code>clear=</code> ''true'' 或者 ''false''（默认是 '''false'''）
:*: 用于强制叠放

您还可以具体列举：
:<code>-{}-<nowiki>{{</nowiki>stack| float=left/'''right''' | clear=true/'''false'''
:|1=<object(s)>
:|2=<object(s)>
:|3=<object(s)>, 最多 9 个
:<nowiki>}}</nowiki></code>
<!--
*NB This multiple argument version does include extra vertical whitespace between each (set of) &lt;object(s)>.
-->

== 示例 ==
<!--

To illustrate the utility of the stack templates, consider the following situation.  We would like to have two right floating images at the top of the first section of our article (here, the ''Lipsum'' section), and one left floating image at the top of the second section (here, the ''Lorem'' section).  To achieve this layout, without using a stack template, we could try the following code:

--><pre>
=====''Lipsum''=====
[[File:白鼠.jpg|thumb|right|示例 1a]]
[[File:白鼠.jpg|thumb|right|示例 1b]]
...文本...

=====''Lorem''=====
[[File:白鼠.jpg|180px|thumb|right|示例 1c]]
...文本...

=====''Ipsum''=====
...文本...
</pre><!--

-->结果在下面的不用 stack 章节显示。注意左侧浮动的图像（示例 1c）被上一个向右浮动的图片（示例 1b）阻隔。您可能需要调整浏览器窗口的宽度来了解问题。为修正这个问题，可以用下列代码堆叠两个右侧浮动的图像：<!--

--><pre>
=====''Lipsum''=====
{{stack |[[File:白鼠.jpg|thumb|right|示例 2a]] [[File:白鼠.jpg|thumb|right|示例 2b]]}}
...文本...

=====''Lorem''=====
[[File:白鼠.jpg|thumb|left|示例 2c]]
... 文本 ...

=====''Ipsum''=====
...文本...
</pre><!--

-->结果在下面的使用 stack 章节显示。注意使用这类模板以后，左侧浮动的图像（示例 1c）可以在更高的位置浮动显示，而且不被上一个向右浮动的图片（示例 1b）阻隔。
{{clear}}


====不用 {{tlx|stack}}====
=====''Lipsum''=====
[[File:白鼠.jpg|thumb|right|示例 1b]]
[[File:白鼠.jpg|thumb|right|示例 2b]]
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

=====''Lorem''=====
[[File:白鼠.jpg|thumb|left|示例 3b]]
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

=====''Ipsum''=====
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''
{{clear}}


====使用 {{tlx|stack}}====
----
=====''Lipsum''=====
{{stack|[[File:白鼠.jpg|thumb|right|示例 1a]] [[File:白鼠.jpg|thumb|right|示例 2a]]}}
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

=====''Lorem''=====
[[File:白鼠.jpg|thumb|left |示例 3a]]
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

=====''Ipsum''=====
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''
{{clear}}

====使用 {{tlx|stack begin}} 和 {{tlx|stack end}}====
=====''Lipsum'' 与加宽的第二个表格=====
{{stack begin}}
{| class="wikitable"
! 表格示例 1 
|-
| 示例 1a 
|-
| 示例 1b 
|-
|}
{| class="wikitable"
! &emsp;&emsp;宽表格示例 2&emsp;&emsp;
|-
|示例 2a 
|-
|示例 2b 
|-
|}
{{stack end}}
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

=====''Lorem''=====
{| style="background:whitesmoke;"
! 表格示例 3 
|-
| 示例 3a 
|-
|}
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

=====''Ipsum''=====
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''
{{clear}}

=====''Lipsum'' 与加宽的第一个表格=====
{{stack begin}}
{| class="wikitable"
! &emsp;&emsp;宽表格示例 1&emsp;&emsp;
|-
| 示例 1a 
|-
| 示例 1b 
|-
|}
{| class="wikitable"
! 表格示例 2 
|-
| 示例 2a 
|-
| 示例 2b 
|-
|}
{{stack end}}
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

=====''Lorem''=====
{| style="background:whitesmoke;"
! 表格示例 3 
|-
| 示例 3a 
|-
|}
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

=====''Ipsum''=====
''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''

''Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''
{{clear}}

===其他示例===
{{tlx|Stack}} 可以用来在页面浮动显示多个图片。
{{stack |[[File:白鼠.jpg|80px]]}}
{{stack |[[File:白鼠.jpg|120px]]}}
<pre style="width:25.0em;overflow:auto;">
{{stack|[[File:白鼠.jpg|80px]]}}
{{stack|[[File:白鼠.jpg|120px]]}}
</pre>

{{tlx|Stack}} 可以用来在其他办法都不能获得满意的效果的情况下把向左对齐的元素排在信息框或者其他向右对齐的项目旁边浮动显示。
{| style="float: right; width: 4em; font-size: 90%; margin: 1em 0 1em 1em; background: #f9f9f9; border: 1px #999999 solid; border-collapse: collapse; clear: right; text-align: center"
| '''信息框'''
<br/>第1行<br />第2行<br />第3行<br />第4行<br />第5行<br />第6行<br />第7行<br />第8行<br />第9行
|}
[[File:局长.jpg|thumb|right|60px|测试图像]]
{| class="wikitable"
|style="width:33.0em<!--(was 420px)-->;"|
{{黑幕|HTML 娘表示使用 float:right 这个样式的元素会和向左对齐的元素打架}}
|}