欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

div中加入span右對齊后出現(xiàn)換行顯示兩種解決思路

  發(fā)布時間:2012-12-19 11:37:06   作者:佚名   我要評論
div中加入span右對齊后,出現(xiàn)了換行問題,一般思路的話一定是認(rèn)為通過分開兩列,一個align=left,另一個align=right;很是疑惑,于是利用閑暇時間,搜索整理下,曬出來與大家分享,希望可以幫助你們
就類似說空間里面模塊中模塊名靠左,編輯字樣出現(xiàn)在靠右,一般思路的話一定是認(rèn)為通過<td>分開兩列,一個align=left,另一個align=right。后來我無意中發(fā)現(xiàn)有個東西叫<span>,比如實現(xiàn)模塊的效果就可以:<div class="portlet" align="left">文章<span><a href="">編輯</a></span></div>;當(dāng)然我們還需要一個CSS文件去控制span的樣式:

復(fù)制代碼
代碼如下:

.portlet span
{
float:right
}

這個時候就發(fā)現(xiàn)出現(xiàn)一個問題“文章”跟“編輯”不在同一行中!這下苦悶了!于是只好去搜了問題原因如下(以下內(nèi)容摘自bolg):
當(dāng)非float的元素和float的元素在一起的時候,如果非float元素在先,那么float的元素將被排斥
也就是說,你的span是float:right,但是你文本還是float:none

如果要讓兩者占據(jù)同一行,一般有兩個解決方法:
第一種:把span先于文本顯示
如:

復(fù)制代碼
代碼如下:

<div>
<span class="right">
其實百度是XX?。?
</span>
谷歌會稍微x一些,博客小子。
</div>

第二:把文本也設(shè)成float
如:

復(fù)制代碼
代碼如下:

<div>
<span class="right">
其實百度是xx??!
</span>
<span class="left">
谷歌會稍微x一些,博客小子。
</span>
</div>

為什么會這樣呢?(以下內(nèi)容摘自bolg)
Span本身雖然是內(nèi)聯(lián)元素,但加上浮動后它就變成了塊級元素了,所以才會自動換行,浮動元素的頂端不能高于先于它出現(xiàn)的浮動元素或段落的頂端

PS:
不用float 讓div 居右
一個大的 div 里面有且只有一個小的 div,為了讓小的 div 居右,可以使用 float,但大家都知道 float 會帶來兼容方面的一些麻煩,為了使結(jié)構(gòu)不那么復(fù)雜,可以使用 text-align、margin 來實現(xiàn)居右。
為了兼容 IE,對大的 div 指定樣式:

復(fù)制代碼
代碼如下:

text-align:right;

為了兼容 FF,對小的 div 指定樣式:

復(fù)制代碼
代碼如下:

margin:0px auto 0px auto;

同樣,如果要居中:text-algin 可指定為 center,margin 的左、右邊距可指定為 auto。

相關(guān)文章

最新評論