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的樣式:
.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先于文本顯示
如:
<div>
<span class="right">
其實百度是XX?。?
</span>
谷歌會稍微x一些,博客小子。
</div>
第二:把文本也設(shè)成float
如:
<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 指定樣式:
text-align:right;
為了兼容 FF,對小的 div 指定樣式:
margin:0px auto 0px auto;
同樣,如果要居中:text-algin 可指定為 center,margin 的左、右邊距可指定為 auto。
復(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)文章
css實現(xiàn)文本和div居中對齊詳細(xì)講解示例
這篇文章主要介紹了css實現(xiàn)文本和div居中對齊詳細(xì)講解示例,需要的朋友可以參考下2014-05-05- 這篇文章主要介紹了通過position定位實現(xiàn)div底端對齊,感興趣的朋友可以參考下2014-04-02
多個div中table的tdwidth設(shè)置一樣也不法對齊
最近發(fā)現(xiàn)多個div中table的td就算調(diào)成一樣的width也無法對齊,后來發(fā)現(xiàn)了解決方法,提到table-layout: fixed,經(jīng)設(shè)置效果相當(dāng)不錯,大家可以參考下2014-03-28- 這篇文章主要介紹了關(guān)于圖片在div中垂直和水平同時對其的問題,下面有個不錯的解決方法,大家可以參考下2014-03-28
- DIV和SPAN如何垂直居中對齊,水平居中很簡單,設(shè)置text-align:center就可以了,垂直居中一直很是疑惑,下面為大家解惑2014-02-20
- 在某些時候可能需要將一個絕對定位的div在它的父對象中垂直居中對齊,可能用到的頻率不是太高,但是偶爾也會用到,下面就簡單介紹一下如何實現(xiàn)此功能2014-01-27
- div 水平居中的實現(xiàn)方法。2009-10-15
CSS讓圖片垂直居中和底端對齊的代碼-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
本CSS教程提供了兩種對齊方式即垂直居中對齊和底端對齊!更多內(nèi)容請參考本站的CSS視頻教程。 CSS使圖片垂直居中的代碼: <!DOCTYPE html PUBLIC "-//W3C//DT2008-10-17- 這篇文章主要為大家詳細(xì)介紹了html5 div布局與table布局,區(qū)分div布局與table布局的異同,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-16
學(xué)習(xí)DIV+CSS網(wǎng)頁布局之三列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的三列布局,本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第三篇,感興趣的小伙伴們可以參考一下2016-03-15