Test：修订间差异

来自PD2汉化wiki
跳转到导航 跳转到搜索
←上一编辑
可视化wikitext
Lil174​（留言 | 贡献）
18,714次编辑
无编辑摘要
Lil174​（留言 | 贡献）
18,714次编辑
无编辑摘要
 
（未显示同一用户的1个中间版本）
第1行： 第1行：
{|
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>
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
<templatestyles src="Template:首页/styles.css" />


<gallery>
Items wrap on smaller screens and have a minimum width:
CD.gif|说明1
<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
CD.gif|说明2
  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 1</div>
CD.gif|说明3
  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 2</div>
</gallery>
  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 3</div>
</div>


<div style="white-space: pre-wrap;">这                      是      保留空格的文本</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>


<ref name="Rathma">拉斯玛</ref>
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>


<poem>
Create a reusable template (e.g., Template:FlexContainer):
A stately pleasure-dome decree:[[File:123.png]]
<includeonly>
Where Alph, the sacred river, ran
<div style="display: flex; gap: {{{gap|10px}}}; flex-wrap: {{{wrap|nowrap}}}; margin: {{{margin|10px 0}}};">
Through caverns measureless to man
  {{{1}}}
Down to a sunless sea.
</div>
</includeonly>


So twice five miles of fertile ground
Usage in a page:
With walls and towers were girdled round:
{{FlexContainer|wrap=wrap|gap=20px|
And there were gardens bright with sinuous rills,
  <div style="flex: 1;">A</div>
Where blossomed many an incense-bearing tree;
  <div style="flex: 1;">B</div>
And here were forests ancient as the hills,
}}
Enfolding sunny spots of greenery.
</poem>
 
<center>
LU左上 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-lu">[[File:田字图.png|128px]]</div></div>
UC上中 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-uc">[[File:田字图.png|128px]]</div></div>
RU右上 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-ru">[[File:田字图.png|128px]]</div></div>
<br>
LC左中 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-lc">[[File:田字图.png|128px]]</div></div>
CC中中 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-cc">[[File:田字图.png|128px]]</div></div>
RC右中 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-rc">[[File:田字图.png|128px]]</div></div>
<br>
LB左下 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-lb">[[File:田字图.png|128px]]</div></div>
BC下中 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-bc">[[File:田字图.png|128px]]</div></div>
RB右下 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-rb">[[File:田字图.png|128px]]</div></div>
</center>
 
 
 
{{tipCC|:::::::::::::::::::::::::[[File:田字图.png|64px]]|{{Special:IframePage/bilib|path=?bvid=BV1s14y117k2&autoplay=false}}}}

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”