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

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

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