努力思考 + 实践, 眼高手低是不行的. 注册 | 登陆

元素 float:right 后右对齐换行原因

XML/HTML代码
  1. <p style="width: 400px; height: 20px; text-align: left;">新闻新闻新闻<span style="float: right">2007-08-18</span><span style="clear: both;"></span></p>  
  2.   
  3. <p style="width: 400px; height: 20px; text-align: left;"><span style="float: right">2007-08-18</span>新闻新闻新闻</p>  

效果:

 大小: 1010 bytes
尺寸: 420 x 105
浏览: 322 次
点击打开新窗口浏览全图

原因: 

当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥
也就是说,你的span是float:right,但是你文本还是float:none

如果要让两者占据同一行:

  1. 要么你把span先于文本显示 :<span style="float: right">2007-08-18</span> 示例第3行)
  2. 要么把文本也设成float:<span style="float: left">新闻新闻新闻</span>

参考: http://www.zvv.cn/blog/?action=show&id=31

Tags: css技巧, 浮动, float, 换行

« 上一篇 | 下一篇 »

只显示5条记录相关文章

CSS中Float概念相关文章采撷 (浏览: 7614, 评论: 1)

Trackbacks

点击获得Trackback地址,Encode: UTF-8

3条记录访客评论

取下经。。。HOHO

Post by hexiang on 2007, August 19, 12:31 AM 引用此文发表评论 #1

谢谢!找了好久才找到!

Post by happy on 2008, May 14, 5:21 PM 引用此文发表评论 #2

找了好久,原来是先后顺序就能解决,非常感谢!

Post by todaywell on 2008, June 3, 10:32 PM 引用此文发表评论 #3


本文因为某种原因此时不允许访客进行评论