来自走走停停看看的博客
网上目前两种方法竖排，
一种是用 writing-mode:tb-rl;
另一种是用 layout-flow: vertical-ideographic;
但遗憾的是，这两种方法都基本是 IE Only 的……
那么维基文库是如何做到的呢？随便翻看一下代码，恍然大悟~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="font-size:xx-large; font-weight:bold; width:30px; height:12px; float:right;">水调歌头</div>
<div style="width:1.5em; float:right;"> </div>
<div style="width:1.5em; float:right;">蘇軾 </div>
<div style="width:1.5em; float:right;"> </div>
<div style="width:1.5em; float:right;">明月幾時有 </div>
<div style="width:1.5em; float:right;">把酒問青天 </div>
<div style="width:1.5em; float:right;">不知天上宮闕 </div>
<div style="width:1.5em; float:right;">今夕是何年 </div>
<div style="width:1.5em; float:right;">我欲乘風歸去 </div>
<div style="width:1.5em; float:right;">又恐瓊樓玉宇 </div>
<div style="width:1.5em; float:right;">高處不勝寒 </div>
<div style="width:1.5em; float:right;">起舞弄清影 </div>
<div style="width:1.5em; float:right;">何似在人間 </div>
<div style="width:1.5em; float:right;"> </div>
<div style="width:1.5em; float:right;">轉朱閣 </div>
<div style="width:1.5em; float:right;">低綺戶 </div>
<div style="width:1.5em; float:right;">照無眠 </div>
<div style="width:1.5em; float:right;">不應有恨 </div>
<div style="width:1.5em; float:right;">何事長向別時圓 </div>
<div style="width:1.5em; float:right;">人有悲歡離合 </div>
<div style="width:1.5em; float:right;">月有陰晴圓缺 </div>
<div style="width:1.5em; float:right;">此事古難全 </div>
<div style="width:1.5em; float:right;">但願人長久 </div>
<div style="width:1.5em; float:right;">千里共嬋娟 </div>
</body>
</html>
虽然代码不是很优雅，但大概意思也知道了。设置宽度为1.5倍的字宽，保证列距，然后让所有div右浮动。
很简单又很有用的技巧，兼容各个主流浏览器~
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
