div中加⼊span右对齐后出现换⾏显⽰两种解决思路
就类似说空间⾥⾯模块中模块名靠左，编辑字样出现在靠右，⼀般思路的话⼀定是认为通过<td>分开两列，⼀个align=left，另⼀个align=right。后来我⽆意中发现有个东西叫<span>,⽐如实现模块的效果就可以：<div class="portlet" align="left">⽂章<span><a href="">编辑</a></span></div>；当然我们还需要⼀个CSS⽂件去控制span的样式：
复制代码
代码如下:
.portlet span
{
float:right
}
这个时候就发现出现⼀个问题“⽂章”跟“编辑”不在同⼀⾏中！这下苦闷了！于是只好去搜了问题原因如下（以下内容摘⾃bolg）：
当⾮float的元素和float的元素在⼀起的时候，如果⾮float元素在先，那么float的元素将被排斥
也就是说，你的span是float:right，但是你⽂本还是float:none
如果要让两者占据同⼀⾏，⼀般有两个解决⽅法:
第⼀种：把span先于⽂本显⽰
如：
复制代码
代码如下:
<div>
<span class="right">
其实百度是XX！！
</span>
⾕歌会稍微x⼀些，博客⼩⼦。
</div>
第⼆：把⽂本也设成float
如：
复制代码
代码如下:
<div>
<span class="right">
其实百度是xx！！
</span>
<span class="left">
⾕歌会稍微x⼀些，博客⼩⼦。
</span>
</div>
为什么会这样呢？(以下内容摘⾃bolg)
Span本⾝虽然是内联元素，但加上浮动后它就变成了块级元素了，所以才会⾃动换⾏，浮动元素的顶端不能⾼于先于它出现的浮动元素或段落的顶端
PS:
不⽤float 让div 居右
⼀个⼤的 div ⾥⾯有且只有⼀个⼩的 div，为了让⼩的 div 居右，可以使⽤ float，但⼤家都知道 float 会带来兼容⽅⾯的⼀些⿇烦，为了使结构不那么复杂，可以使⽤ text-align、margin 来实现居右。
为了兼容 IE，对⼤的 div 指定样式：
复制代码div中的div居中
代码如下:
text-align:right;
为了兼容 FF，对⼩的 div 指定样式：
复制代码
代码如下:
margin:0px auto 0px auto;
同样，如果要居中：text-algin 可指定为 center，margin 的左、右边距可指定为 auto。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。