如何解决css float:right右对齐换行问题?

发布时间:2019-11-25编辑:脚本学堂
有关css float:right右对齐换行问题的解决方法,css float right居右对齐后出现日期换行,可以把把span先于文本显示,或把文本也设成float,就可以解决这个问题。

css float:right右对齐换行问题
在Chrome、Firefox下无此问题,但是在IE下就会出现,日期另起一行。

原因分析:
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥也就是说,span是float:right,但文本还是float:none。
如果要让两者在同一行的话,有两种方法。
把span先于文本显示,即:
 

复制代码 代码示例:
<div1 style1="width:300px;margin-top:8px;"> 
<span1 style1="float:right;">2010-08-09</span1>
标题标题标题标题标题
</div1> 

 或把文本也设成float:
 

复制代码 代码示例:
<div1 style="width:300px;margin-top:8px;">
<span1 style="float:left;"> 标题标题标题标题标题</span1>
<span1 style="float:right;">2010-08-09</span1>
<span1 style="clear:both;"></span1>
</div1>

二、为什么css中float:right后右对齐换行

css中通常需要将某元素居左、居右显示,可以根据float来设置,在设置右对齐显示时会遇到,右对齐的元素会换行,这样就会出现左右元素不在同一条线上。

二种解决方法:
 
解决办法1:把左右对换,比如把日期放在标题的前面,对调一下。

解决办法2:给右边也加上float:right。
 
css float定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 css 中,任何元素都可以浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄.
float常跟属性值left、right、none
float:none 不使用浮动
float:left 靠左浮动
float:right 靠右浮动