解决div与span等inline元素同行后高度不一致问题

这里场景是有一个div使用display：inline-block，前面有一个span元素，如此设置导致了，这两个元素的高度不一致，div的下边界明细要比span元素高出一块，并且对div使用margin，span元素也跟着联动。头疼。即使用了vertical-align解决了小x的问题也没有什么反应，看来问题的原因不在这里，至于具体原因现在仍不是很清楚，如果有人知道原因希望能够给予解答，感激不尽。网上找到了下面这样的代码得以解决。将div和span都table化。问题迎刃而解。看来table是个好东西，怪不得bootstrap也用到了此思想。

<table>
<tr>
<th style="width:180px;border:1px solid red">
<span style="float:right">span</span>
<div>div</div>
</th>
</tr>
</table>