建议 一种全新的排版方式

[MCIN]

各位好呀，这里是汉化区新晋版主MCIN

从成为版主的那天开始，自己就一在不断学习着表格排版的技术

随着排版技术的逐渐增长，自己也越发意识到了一件事——

表格排版是有极限的

由于表格的特殊性，表格内部的元素与字符会被强制性居中：

1111	1111 1111 1111

同时内部无法删除的<br>行也导致表格不仅没法做出宽高无法成比例缩放的方格，还限制死了单元格最小28像素的高度……

于是，在发现了更好的替代品之后——

自己不做表格了！

咳咳，那么那个替代品究竟是什么呢？

盒子（<div>）

在自己使用盒子进行排版，辅以部分特殊的代码设计之后，就设计出来了这个：

当值版主：MCIN 

 

 

 

 

 

 

 

 

 

 

 

 

◈ 这里是汉化者之间交流汉化技术的场所 ◈

魔物巢穴禁止万用回覆,纯支持感谢 ♥ ♥ ♥ ♥ ♥ ♥ 初次尝试开坑汉化，请关注汉化技术主题

◈ 汉化区招募版主啦~~~有推荐有奖励!! ◈

 

 

 

 

 

一个在电脑，平板，手机三端都能按照正常比例显示的“表格排版”

这是怎么做到的呢？

首先我们需要了解一个盒子的特性：

 

上面是一个高度（height）为零的盒子，由于其高度（height）为零，整个盒子的本体被挤压成了一条窄缝

但是如果你试着用鼠标框选这个盒子，你就会发现盒子的下方出现了一根神秘的蓝条

这根蓝条是被挤出盒子的<br>

不是太理解发生了什么？那自己再往盒子里放张图片吧：

 

 

在盒子的高度（height）为零时，其中的内容物会溢出盒外，这能让我们做出表格基本上无法实现的，元素重叠的效果

同时，如果你对这个高度为零的盒子设定一个内边距（padding）：

 

盒子会被强制撑开

由于此时盒子的高度（height）为零，其中的<br>被强制挤出，不会对盒子的高度造成干扰

并且由于内边距（padding）和高度（height）不同，能够使用百分号

我们便得到了一个无论何时，高度（height）永远为其宽度（width）的5%的长方形方格

此时再稍微活用一下盒子溢出的特性

当值版主：MCIN 

 

我们就得到了一个“里面看上去写着东西”的，能够成比例缩放的方格

大概就是这么一回事！这东西实在是太好用了！

不过由于盒子的特性较为古怪，自己也没有完全研究透，所以之后就请看到这里的各位自由尝试吧~

 

 

 

昨日 18:22，由MCIN修改

[久帝]

排版怎么还带整活的

[wondergx]

不是，都用开div了吗……那能不能内嵌css样式（style）啥的啊？尤其是flex能不能用？好像普通用户组不能直接插入html代码……mcin要不要试试？类似这样的……

<style>       

        .grid-item {

            background-color: #4CAF50;

            color: white;

            padding: 20px;

            text-align: center;

            border-radius: 4px;

            margin: 5px;

        }    

    </style>

 <div style="display: flex; flex-wrap: wrap;">

            <div class="grid-item" style="flex: 1 1 200px;">项目 1</div>

            <div class="grid-item" style="flex: 1 1 200px;">项目 2</div>

            <div class="grid-item" style="flex: 1 1 200px;">项目 3</div>

            <div class="grid-item" style="flex: 1 1 200px;">项目 4</div>

            <div class="grid-item" style="flex: 1 1 200px;">项目 5</div>

        </div>

 

 

18 小时前，由wondergx修改

[MCIN]

1 小时前，wondergx说道:

不是，都用开div了吗……那能不能内嵌css样式（style）啥的啊？尤其是flex能不能用？好像普通用户组不能直接插入html代码……mcin要不要试试？类似这样的……

<style>       

        .grid-item {

            background-color: #4CAF50;

            color: white;

            padding: 20px;

            text-align: center;

            border-radius: 4px;

            margin: 5px;

        }    

    </style>

 <div style="display: flex; flex-wrap: wrap;">

            <div class="grid-item" style="flex: 1 1 200px;">项目 1</div>

            <div class="grid-item" style="flex: 1 1 200px;">项目 2</div>

            <div class="grid-item" style="flex: 1 1 200px;">项目 3</div>

            <div class="grid-item" style="flex: 1 1 200px;">项目 4</div>

            <div class="grid-item" style="flex: 1 1 200px;">项目 5</div>

        </div>

 

 

很遗憾…上面的这些代码论坛都完全不支持……

自己为了达成表格全端显示尝试了很多高大上的代码，但全都被论坛防出去了

可以说自己的方案几乎就是唯一的方法了

[wondergx]

4 分钟前，MCIN说道:

很遗憾…上面的这些代码论坛都完全不支持……

自己为了达成表格全端显示尝试了很多高大上的代码，但全都被论坛防出去了

可以说自己的方案几乎就是唯一的方法了

看了下，论坛代码里有flex的，那应该是不支持自设class那种了，把class换掉，class内容对应加到style里多半是可行的（

但说真的不支持class总感觉这前端代码怪怪的

[MCIN]

7 分钟前，wondergx说道:

看了下，论坛代码里有flex的，那应该是不支持自设class那种了，把class换掉，class内容对应加到style里多半是可行的（

但说真的不支持class总感觉这前端代码怪怪的

但display：xxx之类的代码论坛大部分都不支持…flex也在其列

强行打出去保存就会直接被论坛去掉

16 小时前，由MCIN修改

[wondergx]

10 分钟前，MCIN说道:

但display：xxx之类的代码论坛大部分都不支持…flex也在其列

强行打出去保存就会直接被论坛去掉

那……用源代码里的这个试试？<div class="ipxFlex"></div>

在打包的css代码里类似的类有很多，基本把常用功能都包了一遍，如果能直接用那应该省不少事

 

16 小时前，由wondergx修改

[MCIN]

2 小时前，wondergx说道:

那……用源代码里的这个试试？<div class="ipxFlex"></div>

在打包的css代码里类似的类有很多，基本把常用功能都包了一遍，如果能直接用那应该省不少事

 

字数: 62

被吞掉了……

估计这个class本身就不被允许输入，自己之前试的时候也不行

13 小时前，由MCIN修改

[箜茗潇]

 

css就别想了，只有几个style能生效。