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

时间:2023-03-08 20:46:44
使用模拟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; }