React中如何将div内的data2组件单独右对齐？

给你几种简单直接的实现方式，都能避免data2换行，同时让它靠右对齐：

方法1：Flex布局（最推荐） #

利用flex的justify-content: space-between属性，让两个元素自动分布在容器两端，中间自动填充空白，适配各种容器宽度：

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
  {props.data1}
  {props.data2}
</div>

方法2：Float浮动 #

给data2套个span并设置右浮动，外层容器加overflow: hidden清除浮动，避免布局塌陷：

<div style={{ overflow: 'hidden' }}>
  {props.data1}
  <span style={{ float: 'right' }}>{props.data2}</span>
</div>

方法3：Grid布局 #

通过网格列分配，让第一列占满剩余空间，第二列自适应宽度，自然靠右：

<div style={{ display: 'grid', gridTemplateColumns: '1fr auto' }}>
  {props.data1}
  {props.data2}
</div>

之前你用span时data2换行，大概率是容器宽度不够或者没设置正确的布局属性，上面这几种方法都能解决这个问题，优先用flex布局，兼容性好且代码简洁。

内容的提问来源于stack exchange，提问作者Mason Williams