建议 一种全新的排版方式

[MCIN]

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

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

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

表格排版是有极限的

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

1111	1111 1111 1111

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

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

自己不做表格了！

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

盒子（<div>）

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

当值版主：MCIN 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

 

 

 

 

 

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

这是怎么做到的呢？

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

 

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

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

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

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

 

 

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

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

 

盒子会被强制撑开

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

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

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

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

当值版主：MCIN 

 

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

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

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

 

 

 

3 小时前，由MCIN修改