一、所有元素靠右:
<view class="container">
<img style="width: 50rpx;height: 50rpx;" src="https://cdn.pixabay.com/photo/2019/05/14/17/11/fruit-4202929_1280.png" alt="" />
<text>靠右显示</text>
</view>
<style lang="scss">
.container{
height: 100rpx;
background-color: cornsilk;
text-align:right;
}
</style>
![](https://img-blog.csdnimg.cn/direct/7bd064d6f6274ef3b3e7b3a3f2642b6b.png)
二、单一元素靠右:
方式1,直接排列:
<view class="container">
<view class="left">
<img style="width: 50rpx;height: 50rpx;"
src="https://cdn.pixabay.com/photo/2019/05/14/17/11/fruit-4202929_1280.png" alt="" />
</view>
<view class="right">
<text>靠右显示</text>
</view>
</view>
<style lang="scss">
.container{
height: 100rpx;
background-color: cornsilk;
// text-align:right;
display: flex;
}
.right{
position: absolute;
right: 10rpx;
}
</style>
![](https://img-blog.csdnimg.cn/direct/70fb7906b229474aa26f6a21f7918388.png)
方式2,元素挤压:
<view class="container">
<view class="left">
<img style="width: 50rpx;height: 50rpx;"
src="https://cdn.pixabay.com/photo/2019/05/14/17/11/fruit-4202929_1280.png" alt="" />
</view>
<view class="right">
<text>靠右显示</text>
</view>
</view>
<style lang="scss">
.container{
height: 100rpx;
background-color: cornsilk;
// text-align:right;
display: flex;
}
.left{
width: 70%;
}
.right{
// position: absolute;
// right: 10rpx;
width: 30%;
}
</style>
![](https://img-blog.csdnimg.cn/direct/b64d7e71661a4d11ab911226ac33036a.png)