各位好呀,这里是汉化区新晋版主MCIN
从成为版主的那天开始,自己就一在不断学习着表格排版的技术
随着排版技术的逐渐增长,自己也越发意识到了一件事——
表格排版是有极限的
由于表格的特殊性,表格内部的元素与字符会被强制性居中:
1111
1111
1111
1111
同时内部无法删除的<br>行也导致表格不仅没法做出宽高无法成比例缩放的方格,还限制死了单元格最小28像素的高度……
于是,在发现了更好的替代品之后——
自己不做表格了!
咳咳,那么那个替代品究竟是什么呢?
盒子(<div>)
在自己使用盒子进行排版,辅以部分特殊的代码设计之后,就设计出来了这个:
当值版主:MCIN
◈ 这里是汉化者之间交流汉化技术的场所 ◈
魔物巢穴禁止万用回覆,纯支持感谢 ♥ ♥ ♥ ♥ ♥ ♥ 初次尝试开坑汉化,请关注汉化技术主题
◈ 汉化区招募版主啦~~~有推荐有奖励!! ◈
一个在电脑,平板,手机三端都能按照正常比例显示的“表格排版”
这是怎么做到的呢?
首先我们需要了解一个盒子的特性:
上面是一个高度(height)为零的盒子,由于其高度(height)为零,整个盒子的本体被挤压成了一条窄缝
但是如果你试着用鼠标框选这个盒子,你就会发现盒子的下方出现了一根神秘的蓝条
这根蓝条是被挤出盒子的<br>
不是太理解发生了什么?那自己再往盒子里放张图片吧:
在盒子的高度(height)为零时,其中的内容物会溢出盒外,这能让我们做出表格基本上无法实现的,元素重叠的效果
同时,如果你对这个高度为零的盒子设定一个内边距(padding):
盒子会被强制撑开
由于此时盒子的高度(height)为零,其中的<br>被强制挤出,不会对盒子的高度造成干扰
并且由于内边距(padding)和高度(height)不同,能够使用百分号
我们便得到了一个无论何时,高度(height)永远为其宽度(width)的5%的长方形方格
此时再稍微活用一下盒子溢出的特性
当值版主:MCIN
我们就得到了一个“里面看上去写着东西”的,能够成比例缩放的方格
大概就是这么一回事!这东西实在是太好用了!
不过由于盒子的特性较为古怪,自己也没有完全研究透,所以之后就请看到这里的各位自由尝试吧~