收藏
回答

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

代码如下

<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三个类底部对其。。为什么没对齐呢?

回答关注问题邀请回答
收藏

4 个回答

  • 徐晓晨
    徐晓晨
    2019-02-28

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

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

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

    align-items: flex-end;

    改成

    align-items: baseline;

    这样好看点

    2019-02-25
    赞同
    回复 2
  • iHealth 王深镇
    iHealth 王深镇
    2019-02-25

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

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

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


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

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

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

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

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

    2019-02-25
    赞同
    回复 6
    查看更多(1)
登录 后发表内容