• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

css下div下同行多元素右对齐

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

方法一:

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影响的是其下的行内元素或文字,所以inline-block使得div具有了行内元素的特性,可以右对齐

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

效果如下:

进一步发现,综合之后:
布局更为紧凑;
float和inline-block同行时,并不会产生覆盖浮动的现象,只是会各自规矩地排列着。

 到此这篇关于css下div下同行多元素右对齐的文章就介绍到这了,更多相关div同行多元素右对齐内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
css实现元素垂直居中显示的7种方式发布时间:2022-06-21
下一篇:
css解决浮动导致父元素高度坍塌的几种方法发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap