Test：修订间差异

来自PD2汉化wiki
跳转到导航 跳转到搜索
←上一编辑
可视化wikitext
Lil174​（留言 | 贡献）
18,714次编辑
无编辑摘要
Lil174​（留言 | 贡献）
18,714次编辑
无编辑摘要
 
（未显示同一用户的72个中间版本）
第1行： 第1行：
<span class="dynamic-tooltip" data-tooltip="我是CEO本体是丁真国服老大哈哈哈从S6玩到S11呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵">[[File:真.时间漩涡.png]]可移动动态悬停</span>
Create a horizontal layout with flexible boxes:
<div style="display: flex; gap: 10px; margin: 10px 0;">
  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 1</div>
  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 2</div>
</div>


<div class="tooltip-wrapper">
Items wrap on smaller screens and have a minimum width:
{{{1|[[File:真.时间漩涡.png]]静态悬停}}}
<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
<div class="tooltip-content">{{{2|[[File:真.时间漩涡.png]]我是CEO本体是丁真<br>国服老大哈哈哈从S6玩到S11<br>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵}}}</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>
</div>


<span class="d2-red" style="background-color: #ffeb3b; padding: 2px 5px;">高亮文本</span>
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>


{| class="wikitable"
Center-align items vertically and horizontally:
! 标题1
<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px dashed #ccc;">
! 标题2
  <div>Centered Content</div>
! 标题3
|-
| style="background-color: #ffeb3b; padding: 8px;" | 黄色单元格
| style="background-color: #e3f2fd;" | 蓝色单元格
| style="background-color: red" | 测试单元格
|-
| style="background: linear-gradient(90deg, #ff9a9e, #fad0c4);" | 渐变色单元格
| style="background-color: #c8e6c9; border: 2px solid #4caf50;" | 带边框的单元格
| 单元格
|}
 
{{InputBox
| type = password
| placeholder = 输入密码
| style = width: 200px; border-radius: 4px;
}}
 
omod = <span class=omod>omod</span><br>
nmod = <span class=nmod>nmod</span><br>
emphasis = <span class=emphasis>emphasis</span><br>
nodrop = <span class=nodrop>nodrop</span><br>
 
<div class="dropdown">
<span>悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开</span>
<div class="dropdown-content">
{{#lsth:RWWeapons|力量 Strength}}
</div>
</div>
</div>


 
Create a reusable template (e.g., Template:FlexContainer):
<div class="custom-dropdown">
<includeonly>
{{Clickable button 2|Test|点击展开}}
<div style="display: flex; gap: {{{gap|10px}}}; flex-wrap: {{{wrap|nowrap}}}; margin: {{{margin|10px 0}}};">
<div class="dropdown-content" style="display:none;">
  {{{1}}}
<p>[[链接1]]</p>
<p>[[链接2]]</p>
</div>
</div>
</div>
</includeonly>


 
Usage in a page:
{{red|模板红色字体}}<br>
{{FlexContainer|wrap=wrap|gap=20px|
 
  <div style="flex: 1;">A</div>
{| class="wikitable"
  <div style="flex: 1;">B</div>
! 左对齐 !! 居中对齐 !! 右对齐
}}
|-
| style=left | 左 || style=text-align:center | 中 || style=text-align:right | 右
|}
<br>
 
<center>传统居中标签（部分场景可能已弃用）</center>
<div style="text-align: center;">现代居中对齐方式</div>
 
<font size=1px>字体大小1px</font><br>
<font size=1.5em>字体大小1.5em</font><br>
 
<div style="float: left; width: 50%;">左栏内容</div>
<div style="float: right; width: 50%;">右栏内容</div><br>
 
<div style="display: flex; justify-content: space-between;">
  <div>左侧内容</div>
  <div>右侧内容</div>
</div><br>
 
[[File:弹蛋蛋2.gif|left|frame|弹爆你的猫卵子]]图片对齐文字

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

检索自“https://wiki.projectdiablo2.cn/w/index.php?title=Test&oldid=21574”