相对地从容器中取出物品

问题描述

我已尝试创建此消息

UI类似于instagram，但我没有获得相对的心形，我需要将心与容器本身绑定，但它似乎不起作用，因为结果输出是

我试过的代码是

.html

<div class="recieved">anohter left <i class="fa fa-heart heart-reaction"></i>  </div>

.css

 .recieved {
    flex-direction: row;
    padding: 12px;
    border-radius: 40px;
    margin: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    width: fit-content;
   padding-right:1rem
  }
 .heart-reaction{
      color: red;
  }

我在这里使用字体真棒图标，

我也尝试在外部添加，但在接收端发送消息似乎不合适

解决方法

试试这个代码：

 .recieved {
    flex-direction: row;
    padding: 12px;
    border-radius: 40px;
    margin: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    width: fit-content;
    position:relative;
    
  }
 .heart-reaction{
      color: red;
      position:absolute;
      right:0;
      bottom:0;
      height:20px;
      width:20px;
      border-radius:50%;
      background:orange;
  }

.recieved {
        flex-direction: row;
        padding: 12px;
        border-radius: 40px;
        margin: 2px;
        border-width: 1px;
        border-style: solid;
        border-color: grey;
        width: fit-content;
        position:relative;
       padding-right:2rem;
      }
     .heart-reaction{
          color: red;
          position:absolute;
          right:rem;
          bottom:0rem;
         height:20px;
         width:20px;
         border-radius:50%;
         background:orange;
      }

<div class="recieved">anohter left <span class="fa fa-heart heart-reaction">i</span>  </div>

,

如果将div的位置设置为相对位置，然后将图标的位置设置为绝对位置，则可以轻松调整图标的位置。

https://jsfiddle.net/z3gyosfd/

.recieved {
  position:relative;
 }

.heart-reaction{
  position:absolute;
  right:0;
 }