模板:IB：修訂版本之間的差異

2015年10月24日 (六) 01:31的修訂版本

inline block（同軸區塊）

語法及參數順序

{{IB|文字或任何東西|其它樣式}}

參數順序	意義	預設值
1	欲放進此區塊的任何東西	無
2	其它 style	無

說明

display:inlink-block 顧名思義是將區塊內的文字或任何東西以 inline 形式呈現，換句話說，它可以搭配周圍的文字而顯示在一起，且此屬性可設定寬高，使用彈性很高。

※註：各瀏覽器皆支援此屬性。

範例一

inline-block 的應用時機很多，底下只是其中一個例子，並非全部。

某些時候，我們需要列出許多西方人名，例如在一個 TABLE 裡列出三個名字，但當容器寬度有限時，人名可能從中間被截斷，這在英文頁面是相當普通且正常的事。

{| CELLSPACING="0" CELLPADDING="3" STYLE="width:350px;font:normal 9pt Consolas;border:1px solid black"
|-
| FirstName LastName, FirstName LastName, FirstName LastName
|}

顯示結果如下，第三個人名從中間換行：

FirstName LastName, FirstName LastName, FirstName LastName

然而，有些編輯者會希望在換行前後的人名是完整的、不要從中間切開。

這種情況下可利用 {{IB}} 將完整人名括起來，表示它是一個區塊，避免從中間切開。

{| CELLSPACING="0" CELLPADDING="3" STYLE="width:350px;font:normal 9pt Consolas;border:1px solid black"
|-
| {{IB|FirstName LastName}}, {{IB|FirstName LastName}}, {{IB|FirstName LastName}}
|}

顯示結果如下，第三個人名是一個 inline-block，所以連名帶姓一起換行：

FirstName LastName , FirstName LastName , FirstName LastName

範例二

這是比較花俏的例子。

例如我想在一個黑色背景的區域使用一張圖，但圖片本身並非具備透明背景色的 GIF 或 PNG，覺得不太好看。

{| STYLE="width:350px;padding:20px;background:black"
|-
| [[Image:Lamigomonkey.jpg|80px]]
|}

顯示結果如下：

這時候可以耍點花招，用一個 inline-block 將圖片框起來，然後將此區塊的邊框設成圓形、超出的部份剔除：

{| STYLE="width:350px;padding:20px;background:black"
|-
| {{IB|[[Image:Lamigomonkey.jpg|70px]]|width:80px;height:80px;background:white;padding:3px;
box-sizing:border-box;border:2px solid green;border-radius:99px;overflow:hidden}}
|}

顯示結果如下：