[css]如何实现 h5 中<ruby>xxx<rt>xx</rt></ruby>的效果

[abelking]

结构是
<div class="father">
<div>
这是前面
</div>
<div class="hanzi">
汉字
</div>
<div class="pinyin">
pinyin
</div>
<div>
这是后面
</div>
</div>

相等于： 这是前面<ruby>汉字<rt>pinyin</rt></ruby>这是后面 这样的效果。
本身做后端的，折腾了好久没成功。。。 虽然仅仅让 pinyin 在上可以实现，但是没法保证和 hanzi 是左对齐开始的。

[loginv2]

做过类似的东西，不过当时是把字切开处理的，每个字符都是单独的块

[leefly]

这样吗 http://jsbin.com/carukavigo/edit?html,css,output

[Khlieb]

http://web.archive.org/web/20070228150240/http://web.nickshanks.com/stylesheets/ruby.css

[abelking]

@leefly 拼音部分要在汉字的上面，同时汉字部分和前后内容保持在一行。其实就是想通过 css 重现<ruby>的功能。

[leefly]

@abelking 那 flex 里面就只放需要的部分，`拼音部分要在汉字的上面` 这个的话可以通过 `order`来控制顺序

[abelking]

@leefly 谢谢大神 开拓了思路 我再捣鼓捣鼓