|
|
| 第1行： |
第1行： |
| − | <INCLUDEONLY><DIV STYLE="display:inline-block;text-indent:0;padding:0;{{{2|}}};{{{st|}}}">{{{1|}}}</DIV></INCLUDEONLY><noinclude>
| + | #REDIRECT [[User:Digipunk/IB]] |
| − | == inline block（同軸區塊） ==
| + | [[Category:模板管理]] |
| − | ===語法及參數順序===
| + | |
| − | <PRE STYLE="margin-left:20px">{{IB|文字或任何東西|其它樣式}}</PRE>
| + | |
| − | :{| CLASS="wikitable" STYLE="background:white;width:300px"
| + | |
| − | |-
| + | |
| − | ! 參數順序 !! 意義 !! 預設值
| + | |
| − | |-
| + | |
| − | |STYLE="text-align:center"| 1 || 欲放進此區塊的任何東西 || 無
| + | |
| − | |-
| + | |
| − | |STYLE="text-align:center"| 2 || 其它 style || 無
| + | |
| − | |-
| + | |
| − | |STYLE="text-align:center"| st || 其它 style || 無
| + | |
| − | |}
| + | |
| − | | + | |
| − | | + | |
| − | ===說明===
| + | |
| − | : <tt>display:inlink-block</tt> 顧名思義是將區塊內的文字或任何東西以 inline 形式呈現，換句話說，它可以搭配周圍的文字而顯示在一起，且此屬性可設定寬高，使用彈性很高。
| + | |
| − | : ※註：各瀏覽器皆支援此屬性。
| + | |
| − | | + | |
| − | | + | |
| − | ===範例一===
| + | |
| − | :<tt>inline-block</tt> 的應用時機很多，<SPAN STYLE="color:red">底下只是其中一個例子，並非全部。</SPAN>
| + | |
| − | | + | |
| − | :某些時候，我們需要列出許多西方人名，例如在一個 TABLE 裡列出三個名字，但當容器寬度有限時，人名可能從中間被截斷，這在英文頁面是相當普通且正常的事。
| + | |
| − | <PRE STYLE="margin-left:40px">{| CELLSPACING="0" CELLPADDING="3" STYLE="width:350px;font:normal 9pt Consolas;border:1px solid black"
| + | |
| − | |-
| + | |
| − | | FirstName LastName, FirstName LastName, FirstName LastName
| + | |
| − | |}</PRE>
| + | |
| − | | + | |
| − | :顯示結果如下，第三個人名從中間換行：
| + | |
| − | ::{| CELLSPACING="0" CELLPADDING="3" STYLE="width:350px;font:normal 9pt Consolas;border:1px solid black"
| + | |
| − | |-
| + | |
| − | | FirstName LastName, FirstName LastName, FirstName LastName
| + | |
| − | |}
| + | |
| − | | + | |
| − | | + | |
| − | :然而，有些編輯者會希望在換行前後的人名是完整的、不要從中間切開。
| + | |
| − | :這種情況下可利用 <tt><nowiki>{{IB}}</nowiki></tt> 將完整人名括起來，表示它是一個區塊，避免從中間切開。
| + | |
| − | <PRE STYLE="margin-left:40px">{| CELLSPACING="0" CELLPADDING="3" STYLE="width:350px;font:normal 9pt Consolas;border:1px solid black"
| + | |
| − | |-
| + | |
| − | | {{IB|FirstName LastName}}, {{IB|FirstName LastName}}, {{IB|FirstName LastName}}
| + | |
| − | |}</PRE>
| + | |
| − | | + | |
| − | :顯示結果如下，第三個人名是一個 <tt>inline-block</tt>，所以連名帶姓一起換行：
| + | |
| − | ::{| CELLSPACING="0" CELLPADDING="3" STYLE="width:350px;font:normal 9pt Consolas;border:1px solid black"
| + | |
| − | |-
| + | |
| − | | {{IB|FirstName LastName}}, {{IB|FirstName LastName}}, {{IB|FirstName LastName}}
| + | |
| − | |}
| + | |
| − | | + | |
| − | | + | |
| − | ===範例二===
| + | |
| − | :這是比較花俏的例子。
| + | |
| − | | + | |
| − | :例如我想在一個黑色背景的區域使用一張圖，但圖片本身並非具備透明背景色的 GIF 或 PNG，覺得不太好看。
| + | |
| − | <PRE STYLE="margin-left:40px">{| STYLE="width:350px;padding:20px;background:black"
| + | |
| − | |-
| + | |
| − | | [[Image:Lamigomonkey.jpg|80px]]
| + | |
| − | |}</PRE>
| + | |
| − | | + | |
| − | :顯示結果如下：
| + | |
| − | ::{| STYLE="width:350px;padding:20px;background:black"
| + | |
| − | |-
| + | |
| − | | [[Image:Lamigomonkey.jpg|80px]]
| + | |
| − | |}
| + | |
| − | | + | |
| − | | + | |
| − | :這時候可以耍點花招，用一個 <tt>inline-block</tt> 將圖片框起來，然後將此區塊的邊框設成圓形、超出的部份剔除：
| + | |
| − | <PRE STYLE="margin-left:40px">{| 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}}
| + | |
| − | |}</PRE>
| + | |
| − | | + | |
| − | :顯示結果如下：
| + | |
| − | ::{| 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 steelblue;border-radius:99px;overflow:hidden}}
| + | |
| − | |}
| + | |
| − | | + | |
| − | | + | |
| − | [[Category:模板管理]]</noinclude> | + | |
