如何实现一个item居中，另一个右对齐
发布于 5 年前 作者 weixie 8609 次浏览 来自 问答
  • 需求的场景描述（希望解决的问题）

如何实现在一行里，一个view放在中间显示，另一个view右对齐显示

尝试过设置这一行contain 的style为flex row，justify-content：center，然后 右对齐的view 的style 为justify-self：flex-end

不知道为什么没有成功

  • 希望提供的能力
3 回复

<view class=‘container’>

  <view class=‘view1’>

        <view>中间的view</view>

  </view>

  <view class=‘view2’>

        <view>右边的view</view>

   </view>

</view>

父元素container,position:relative

子元素view1、view2 position:absolute

中间的view相对于view1居中，右边的view相对于view2右对齐

<view class=‘warpper’>

<view class=“view1 item”>

</view>

<view class=“view2 item”>

</view>

</view>

.warpper .item {

display: inline-block;

width: 100rpx;

height: 100rpx;

background: #ccc;

}

.warpper {

position: relative;

text-align: center;

}

.warpper .view2 {

position: absolute;

top: 0;

right: 0;

}

不知道是不是你所需要的

绝对定位

回到顶部