Test:修订间差异

来自PD2汉化wiki
跳转到导航 跳转到搜索
Lil174留言 | 贡献
无编辑摘要
标签已被回退
Lil174留言 | 贡献
无编辑摘要
 
(未显示同一用户的253个中间版本)
第1行: 第1行:
原版官方繁体采用 <span class="d2-white">白色</span> 名称<br>
Create a horizontal layout with flexible boxes:
民间修正简体采用 <span class="d2-red">红色</span> 名称<br>
<div style="display: flex; gap: 10px; margin: 10px 0;">
重制版官方繁体采用 暗金色 名称<br>
  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 1</div>
重制版官方简体采用 <span class="d2-teal">青色</span> 名称<br>
  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 2</div>
{| class="wikitable"
</div>
|-
 
! 层级 !! 英文名 !! <span class="d2-white">原版繁 !! <span class="d2-red">修正简 !! D2R繁 !! <span class="d2-teal">D2R简 !! 原版图 !! D2R图
Items wrap on smaller screens and have a minimum width:
|-
<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
| 【普】<br>【扩】<br>【精】 || Cap<br>War Hat<br>Shako || <span class="d2-white">帽子<br>戰帽<br>軍帽 || <span class="d2-red">帽子<br>战帽<br>军帽 || 便帽<br>戰帽<br>軍帽 || <span class="d2-teal">软帽<br>战争帽<br>军帽 || <div class="item-image">[[File:1.Cap_War Hat_Shako.gif]]</div> || <div class="item-image">[[File:1.Cap_War Hat_Shako.jpg|62px]]</div>
  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 1</div>
|-
  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 2</div>
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 3</div>
|-
</div>
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
 
|-
Use flex-direction: column for vertical alignment:
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
<div style="display: flex; flex-direction: column; gap: 8px; max-width: 300px;">
|-
  <div style="padding: 8px; background: #ffebee;">Row 1</div>
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
  <div style="padding: 8px; background: #ffebee;">Row 2</div>
|-
</div>
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
 
|-
Center-align items vertically and horizontally:
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px dashed #ccc;">
|-
  <div>Centered Content</div>
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
</div>
|-
 
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
Create a reusable template (e.g., Template:FlexContainer):
|-
<includeonly>
| 示例 || 示例 || 示例 || 示例 || 示例 || 示例
<div style="display: flex; gap: {{{gap|10px}}}; flex-wrap: {{{wrap|nowrap}}}; margin: {{{margin|10px 0}}};">
|}
  {{{1}}}
</div>
</includeonly>
 
Usage in a page:
{{FlexContainer|wrap=wrap|gap=20px|
  <div style="flex: 1;">A</div>
  <div style="flex: 1;">B</div>
}}

2025年2月23日 (日) 19:14的最新版本

Create a horizontal layout with flexible boxes:

Box 1
Box 2

Items wrap on smaller screens and have a minimum width:

Item 1
Item 2
Item 3

Use flex-direction: column for vertical alignment:

Row 1
Row 2

Center-align items vertically and horizontally:

Centered Content

Create a reusable template (e.g., Template:FlexContainer):


Usage in a page: 模板:FlexContainer