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

發(fā)布時間：2020-09-04 16:19:05 作者：佚名

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

方法一：

float:right
此外，浮動還會使得布局更緊湊（沒空隙）

<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)元素的特性，可以右對齊

<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>

效果圖如下：

從上面兩個方法來看：

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

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

<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>

效果如下：

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

到此這篇關(guān)于css下div下同行多元素右對齊的文章就介紹到這了,更多相關(guān)div同行多元素右對齊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：DIV 同行多元素右對齊

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容