比较从聊天式设计中取出容器中的项目。
比较从聊天式设计中取出容器中的项目。
提问于 2020-12-28 15:26:40
我试着创造了这个信息
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;
}我在这里使用字体很棒的图标，
，我也尝试过在外部添加，但似乎不适合在接收者端发送消息，
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-28 15:31:42
试试下面的代码：
.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>
Stack Overflow用户
发布于 2020-12-28 15:35:02
如果将div的位置设置为相对位置，然后将图标的位置设置为绝对，则可以轻松地调整图标的位置。
https://jsfiddle.net/z3gyosfd/
.recieved {
position:relative;
}
.heart-reaction{
position:absolute;
right:0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65479954
复制相关文章
相似问题
腾讯云开发者
