从设计中相对从容器中取出物品

Posted 2023-03-07

【中文标题】从设计中相对从容器中取出物品

【英文标题】：Take out the item out of container relatively from chat like design

【发布时间】：2021-04-05 08:42:53

【问题描述】：

我已尝试创建此消息 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;
  

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

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

【问题讨论】：

左侧容器外需要心脏吗

是的，类似于instagram

试试我发送的代码 :)

【参考方案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>

【讨论】：

不行，心在页面左下角

你要放在哪里...只要运行上面的代码sn-p...你只需要使用left、right、bottom和top属性将它放置在所需的位置

欢迎。请接受对他人也有帮助的答案和投票:)

心与下一条消息重叠？？知道如何解决这个问题

你能分享你的代码吗我的朋友。在 codepen 或 jsfiddle 上分享

【参考方案2】：

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

https://jsfiddle.net/z3gyosfd/

.recieved 
  position:relative;
 

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