今天遇到一个奇怪的问题:
有个这样的布局:
<div>
这里是标题
<span class="right">这里是时间</span>
</div>
在FF 和 chrome 都正常,显示一行
可是到了IE下就不对了,变成了两行!
在网上找了些资料,算是明白了,具体如下:
原因:
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥也就是说,你的span是float:right,但是你文本还是float:none
如果要让两者占据同一行,一般有两个解决方法:
第一种:把span先于文本显示
如:
<div>
<span class="right">这里是时间</span>
这里是标题
</div>
第二:把文本也设成float
如:
<div>
<span class="right">这里是时间</span>
<span class="left">这里是标题</span>
</div>