當前位置:首頁 >  IDC >  服務器 >  正文

css下div下同行多元素右對齊

 2020-10-19 14:58  來源: 腳本之家   我來投稿 撤稿糾錯

  域名預訂/競價,好“米”不錯過

這篇文章主要介紹了css下div下同行多元素右對齊,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

方法一:

float:right

此外,浮動還會使得布局更緊湊(沒空隙)


hello

hi

效果圖如下:

方法二:

display:inline-block+text-align:right

text-align:right影響的是其下的行內元素或文字,所以inline-block使得div具有了行內元素的特性,可以右對齊


hello

hi

效果圖如下:

從上面兩個方法來看:

float的布局更為緊湊一些;

float:right會改變順序,而text-align:right不會;

text-align同時會影響其下元素的文字對齊方式;

所以,綜合兩個方法,可以得到如下組合:


hello

hi

效果如下:

進一步發(fā)現(xiàn),綜合之后:

布局更為緊湊;

float和inline-block同行時,并不會產生覆蓋浮動的現(xiàn)象,只是會各自規(guī)矩地排列著。

文章來源:腳本之家,原文鏈接:https://www.jb51.net/css/743775.html

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關文章

熱門排行

信息推薦