Posted on 2009-05-08 09:29
itVincent 閱讀(925)
評論(0) 編輯 收藏 所屬分類:
html & css
2009年4月13日 – 21:36
今日閑逛，走到了維基文庫水調歌頭 (明月幾時有)，恰巧發現他居然是文字豎排的，很有興趣一看。
網上目前兩種方法豎排，
一種是用 writing-mode:tb-rl;
另一種是用 layout-flow: vertical-ideographic;
但遺憾的是，這兩種方法都基本是 IE Only 的……
那么維基文庫是如何做到的呢？隨便翻看一下代碼，恍然大悟~
- <div style="font-size:xx-large;font-weight:bold;line-height:1em;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>
- <div style="width:1.5em; float:right;">千里共嬋娟 </div>
雖然代碼不是很優雅（自動生成的……）但大概意思也知道了。設置寬度為1.5倍的字寬，保證列距，然后讓所有div右浮動。
很簡單又很有用的技巧，兼容各個主流瀏覽器~
最后引用一句，對于IE“不應有恨……”，他有些私有屬性還是挺有趣的……
（注：原文中“恨”是遺憾的意思。）
本站采用創作共享版權協議, 要求署名、非商業和保持一致. 本站歡迎任何非商業應用的轉載, 但須注明出自"