使用模拟Table解决span重叠问题

<div id="test">
    <div >
        <span>adfafadsfadfa</span>
        <span style="float:right">123</span>
    </div>
    <div>
         <span>erweqarqwerfqewrew</span>
         <span style="float:right">234.02934023942034</span>
     </div>
</div>                 

 

如上所示，span 123,与 234.xx在手机上可能会重叠到一起,解决方法有两种
1、设置span外div style为 clear:both

2、模拟Table

#test{
　　width:100%;
　　display:table;

}

#test>div
{
　　display:table-row;

}

#test>div>span
{
　　display:table-cell;
　　vertical-align:middle;

}

 另外为了防止英文不换行问题、过宽问题，还需要为左右span增加如下样式

   .shujucellleft
    {
        display:table-cell;vertical-align:middle;max-width:250px;word-wrap:break-word
    }
    .shujucellright
    {
        display:table-cell;vertical-align:middle;
    }