檢視使用說明:圖像的原始碼

==避免圖像「堆積」==
許多用戶進行圖像浮動時常碰到一個問題，就是多幅圖片有時會水平地「堆積」在一起，對於大型圖片尤其如此。「最佳」的解決方法是，添加更多的文本，但有時這是不可能的。本節將介紹一些解決辦法。

[[Image:Logo.gif|thumb|300px|right|{{SITENAME}}標志]]
<p style="font-family:verdana,arial,sans-serif;font-size:small;">
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
</p>
[[Image:Logo.gif|right|thumb|200px|{{SITENAME}}標志]]

<br style="clear:both;">

=== 聯合對齊相似圖片===
經常會有兩幅從邏輯上講需要歸於一組的相似圖片。為做到這一點，需要加入一些html標記：
<pre>
  <div style="float:right;width:315px;">
  [[image:Logo.gif|none|thumb|300px|{{SITENAME}}標志]]

  [[Image:Logo.gif|right|thumb|200px|{{SITENAME}}標志]]
  </div>
</pre>

<div style="float:right;width:315px;">
[[image:Logo.gif|right|thumb|300px|{{SITENAME}}標志]]
<br style="clear:all;">
[[Image:Logo.gif|right|thumb|200px|{{SITENAME}}標志]]
</div>

''{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。''

''{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。''

''{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。{{SITENAME}}。''

<br style="clear:both;">

有時候也可以水平對齊兩幅圖像：
{|
|-
| [[image:Logo.gif|none|thumb|300px|{{SITENAME}}標志]] ||[[image:Logo.gif|none|thumb|300px|{{SITENAME}}標志]]
|}
不過，這應當較少采用，因為對使用較窄的瀏覽器窗口者有可能導致圖片超過屏幕的右邊緣。

實現這個效果的方法是利用[[Help:表格|表格標記]]：
<pre>
{|
|-
| [[image:Logo.gif|none|thumb|300px|{{SITENAME}}標志]] ||[[image:Logo.gif|none|thumb|300px|{{SITENAME}}標志]]
|}
</pre>

另一種避免過寬的辦法是，將兩幅圖都左對齊，直接進行堆積。
[[image:Logo.gif|right|thumb|300px|{{SITENAME}}標志]]
[[image:Logo.gif|right|thumb|300px|{{SITENAME}}標志]]
<br style="clear:both;">
<pre>
[[image:Logo.gif|right|thumb|300px|{{SITENAME}}標志]]
[[image:Logo.gif|right|thumb|300px|{{SITENAME}}標志]]
<br style="clear:both;">
</pre>
這條命令<pre><br style="clear:both;"></pre>是為了防止後面的文字直接顯示在圖片旁。

===左右交替浮動===
或許最簡便的方式便是采用左右交替浮動的方法了——這種方式使得兩幅圖片不會互相幹擾，更不會迭加在一起。

[[Image:Logo.gif|thumb|150px|right|{{SITENAME}}標志]]
[[Image:Logo.gif|right|thumb|150px|{{SITENAME}}標志]]
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''
''{{SITENAME}}，專注於人物記事領域的百科全書。''

<br style="clear:both;">

===強迫換行===
最後的手段是強迫瀏覽器加一空白行，令所有文字和圖片都在第一幅圖片之下出現。但圖片旁的文字之下可能會出現唐突的空白。記住，用戶的瀏覽器、顯示屏解像度、預設的文字大小、瀏覽器上工具列的數目等不同設定，都可能影響文本如何浮動和環繞圖片。因此，不要為了令頁面在你的電腦上看來美觀而強行改變頁面設計。只有在必須的情況下才把頁面「劈開」。可以的話，讓頁面根據邏輯排列即可。

<pre>   <br style="clear:both;"></pre>

[[Image:Logo.gif|thumb|300px|right|{{SITENAME}}標志]]
<p style="font-family:verdana,arial,sans-serif;font-size:small;">
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
</p>
<br style="clear:both;">
[[Image:Logo.gif|right|thumb|200px|{{SITENAME}}標志]]
<p style="font-family:verdana,arial,sans-serif;font-size:small;">
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
{{SITENAME}}，專注於人物記事領域的百科全書。
</p>
<br style="clear:both;">

=== 圖片集 ===
====維基標記語言和層疊樣式表（CSS）====
要在圖片集展示一系列圖片，一個簡單的方法是使用維基標記語言和層迭樣式表（CSS）：讓所有圖片靠左浮動，並在其後清除靠左浮動的設定，以免圖片在圖片集以後的內容中出現。

<pre>
<nowiki>
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志1]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志2]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志3]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志4]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志5]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志6]]
<br style="clear: right"/>
</nowiki>
</pre>

好處：簡單、圖片會根據畫面大小換行。

[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志1]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志2]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志3]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志4]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志5]]
[[Image:Logo.gif|128px|thumb|right|{{SITENAME}}標志6]]
<br style="clear: right"/>

====新的維基平台 ''<nowiki><gallery></nowiki>''標記====

新的維基軟體平台支持 ''<nowiki><gallery></nowiki>''標記，是建立圖片集的簡便方法:

<pre>
<nowiki>
<gallery>
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
</gallery>
</nowiki>
</pre>

好處：簡單方便、圖片之間沒有浪費空間。

壞處：圖片不會根據畫面大小換行、不能設定圖片大小(希望下一個版本可以改善這些不便之處)。

<gallery>
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
Image:Logo.gif|{{SITENAME}}標志
</gallery>