這篇文章主要介紹了css下div下同行多元素右對齊,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
方法一:
float:right
此外,浮動還會使得布局更緊湊(沒空隙)
效果圖如下:
方法二:
display:inline-block+text-align:right
text-align:right影響的是其下的行內(nèi)元素或文字,所以inline-block使得div具有了行內(nèi)元素的特性,可以右對齊
效果圖如下:
從上面兩個方法來看:
float的布局更為緊湊一些;
float:right會改變順序,而text-align:right不會;
text-align同時會影響其下元素的文字對齊方式;
所以,綜合兩個方法,可以得到如下組合:
效果如下:
進一步發(fā)現(xiàn),綜合之后:
布局更為緊湊;
float和inline-block同行時,并不會產(chǎn)生覆蓋浮動的現(xiàn)象,只是會各自規(guī)矩地排列著。
文章來源:腳本之家,原文鏈接:https://www.jb51.net/css/743775.html
申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!