同行但字体大小不同的两段文字,如何实现底部对齐?
-
如图:
React Native并没有实现Flexbox中的align-items: baseline,这个效果该如何实现呢?
JSX:
<View style={styles.numberAndPercent}> <Text style={styles.number}>6.80</Text> <Text style={styles.percent}>%</Text> </View>
-
手动padding/margin 或者绝对定位吧
-
padding和margin貌似都会影响到其他元素,绝对定位确实可以,不过总感觉怪怪的。
-
可以试试,让父容器的子view都置底
flexDirection: 'row',
alignItems: 'flex-end',
-
@zdk 还有考虑text中的文字居于底部
-
@liu31241
text置底,文字不就是置底了吗?除非你text和文字大小高度不一致<View style={{flexDirection: 'row',alignItems: 'flex-end'}}>
<Text>6.80</Text>
<Text>%</Text>
</View>
-
现在还是有这种问题,通过手动加行高可以解决,但是这样是不太优雅的!不知道你后来怎么解决的。另外text内嵌text的方式不能显示间距的问题