css下div下同行多元素右對(duì)齊的方法

這篇文章主要為大家展示了css下div下同行多元素右對(duì)齊的方法，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“css下div下同行多元素右對(duì)齊的方法”這篇文章吧。

方法一：

float:right
此外，浮動(dòng)還會(huì)使得布局更緊湊（沒(méi)空隙）

<div style="background-color: red;width: 100%;height: 60px;/* text-align: right; */">
	<div style="width: 30px;height: 100%;background-color: yellow;float: right;">hello</div>
	<div style="width: 60px;height: 100%;background-color: blue;float: right;">hi</div>
</div>

效果圖如下：

方法二：

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

<div style="background-color: red;width: 100%;height: 60px;text-align: right;">
	<div style="width: 30px;height: 100%;background-color: yellow;display: inline-block;">hello</div>
	<div style="width: 60px;height: 100%;background-color: blue;display: inline-block;">hi</div>
</div>

效果圖如下：

從上面兩個(gè)方法來(lái)看：

float的布局更為緊湊一些；
float：right會(huì)改變順序，而text-align：right不會(huì)；
text-align同時(shí)會(huì)影響其下元素的文字對(duì)齊方式；

所以，綜合兩個(gè)方法，可以得到如下組合：

<div style="background-color: red;width: 100%;height: 60px;text-align: right;">
	<div style="width: 30px;height: 100%;background-color: yellow;display: inline-block;">hello</div>
	<div style="width: 60px;height: 100%;background-color: blue;float: right;">hi</div>
</div>

效果如下：

進(jìn)一步發(fā)現(xiàn)，綜合之后：
布局更為緊湊；
float和inline-block同行時(shí)，并不會(huì)產(chǎn)生覆蓋浮動(dòng)的現(xiàn)象，只是會(huì)各自規(guī)矩地排列著。

以上就是關(guān)于“css下div下同行多元素右對(duì)齊的方法”的內(nèi)容，如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。