react js中的css对齐问题

Question

<div> 
  <div className='dif'> 
      <div style={{marginLeft:10, bottom: '0', left: '0',color:'#45b37c',position:'relative'}} className = 'fl big-font'>$108</div>
      <div style={{ margin:'20px', textAlign:'right', position: 'absolute', bottom: '0', right: '0',}}> Target: $1234</div>
      <div style={{ marginRight:'20px', marginTop:'10px', textAlign:'right', position: 'absolute', bottom: '0', right: '0',}}> Actual: $1234</div>
    </div>
</div>

这是我正在使用的代码。

如果您看到图像。我正在尝试将 20 美元以及目标和实际 div 设置在主 div 的右下角。 但是当我增加左侧文本的大小时。我往上走。 任何人都可以告诉我如何将其固定到底部。 我尝试了 text-align 但没有成功。

<div>
  <div class='dif'>
    <div style="margin-left:10; bottom: 0; left: 0; color:#45b37c; position:relative;" class="fl big-font">$108</div>
    <div style="margin: 20px; text-align: right; position: absolute; bottom: 0; right: 0 "> Target: $1234</div>
    <div style="margin-right: 20px; margin-top: 10px; text-align: right; position: absolute; bottom: 0; right: 0;"> Acutal: $1234</div>
  </div>
</div>

Answer 1

使用 flexbox 来制作底部的两个项目：

.dif {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; 
}

并将最后2个元素包装到div中，您还应该删除顶部div，我认为没有必要：

<div className='dif'> 
    <div style={{marginLeft:10, color:'#45b37c'}} className='fl big-font'>$108</div>
    <div>
      <div style={{ margin:'20px', textAlign:'right', position: 'absolute', bottom: '0', right: '0',}}> Target: $1234</div>
      <div style={{ marginRight:'20px', marginTop:'10px', textAlign:'right', position: 'absolute', bottom: '0', right: '0',}}> Acutal: $1234</div>
    </div>
 </div>