收藏
回答

问大家一个简单布局问题嘛

代码如下

<view class="box">
    <text class="a">¥</text>
    <text class="b">6.00</text>
    <text class="c">12.00</text>
</view>
 
.box{
    height:100rpx;
    display:flex;
    flex-direction: row;
    align-items: flex-end;
    background-color: #FF2D4B;
}
.a{
    font-size: 20rpx;
}
.b{
    font-size: 40rpx;
}
.c{
    font-size: 28rpx;
}

运行效果:


期望:

就是希望a,b,c三个类底部对其。。为什么没对齐呢?

最后一次编辑于  02-25  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

4 个回答

  • 徐晓晨
    徐晓晨
    02-28

    把box中的align-items: flex-end;改成align-items: baseline;

    02-28
    赞同
    回复
  • 铭锋科技
    铭锋科技
    02-25

    我觉得把line-height:1;去掉

    align-items: flex-end;

    改成

    align-items: baseline;

    这样好看点

    02-25
    赞同
    回复 2
    • 远山
      远山
      02-25

      确实能够对齐,但是会导致离底部有点距离


      02-25
      回复
    • 远山
      远山
      02-25回复远山

      代码片段:https://developers.weixin.qq.com/s/VjQdirm87065

      02-25
      回复
  • iHealth 王深镇
    iHealth 王深镇
    02-25

    试一下 给 .a .b .c 一个和size一样的高度,先变成块级元素

    02-25
    赞同
    回复 2
    • 远山
      远山
      02-25

      可以对其,倒是会导致超出底部。


      代码片段:https://developers.weixin.qq.com/s/U3Pc1rmV7Y6l

      02-25
      回复
    • iHealth 王深镇
      iHealth 王深镇
      02-25回复远山

      这个时候去调整一下line-height 的大小,就可以控制位置了,没有太完美的了

      02-25
      回复
  • 卢霄霄
    卢霄霄
    02-25

    给box加个 line-height: 1; 能好吗?你这个看着怎么这么怪

    02-25
    赞同
    回复 6
    查看更多(1)