當(dāng)前位置:首頁 >  IDC >  服務(wù)器 >  正文

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

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

  域名預(yù)訂/競價,好“米”不錯過

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

方法一:

float:right

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


hello

hi

效果圖如下:

方法二:

display:inline-block+text-align:right

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


hello

hi

效果圖如下:

從上面兩個方法來看:

float的布局更為緊湊一些;

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

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

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


hello

hi

效果如下:

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

布局更為緊湊;

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

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

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

相關(guān)標(biāo)簽
如何消除div之間的空隙
div
CSS

相關(guān)文章

熱門排行

信息推薦