从聊天类设计中相对地取出容器中的物品

Question

我试过创建这条消息 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;
  }

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

I tried adding outside as well but It seems not right for sending the message as it goes at the recievers end

Answer 1

试试这个代码：

 .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>

Answer 2

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

https://jsfiddle.net/z3gyosfd/

.recieved {
  position:relative;
 }

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

从聊天类设计中相对地取出容器中的物品

Take out the item out of container relatively from chat like design

html

css

css-position

flexbox