在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
方法一: 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 <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的布局更为紧凑一些; 所以,综合两个方法,可以得到如下组合: <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> 效果如下: 进一步发现,综合之后: 到此这篇关于css下div下同行多元素右对齐的文章就介绍到这了,更多相关div同行多元素右对齐内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论