Question

我希望此图标图像位于此div的右下角，以便看起来消息来自图标的头部。我愚弄了很多东西，但还没有找到具体的解决方案。

css代码的相关位

img.to{
        position: absolute;
        right: 0px;
        bottom: 0px;
        float:right;
        width: 24px;
        height: 24px;
        content:url("https://cdn2.iconfinder.com/data/icons/ui-1/60/05-512.png");
    }

.messageContainer{
    width:100%;
    position: relative;
}
.message.to {
    border-radius: 3em 3em .5em 3em;
    background-color: black;
    color: #fff;
    float:right;
    margin-right: 30px;
    margin-left: 12em;

}

使用angular

的html的相关位

<ng-container *ngFor="let message of messages | async">
    <div class="messageContainer">
         <img class="icon" [ngClass]="{ 'from': message.sentBy === 'bot',
                                    'to':   message.sentBy === 'user' }"/>
        <div class="message" [ngClass]="{ 'from': message.sentBy === 'bot',
                                    'to':   message.sentBy === 'user' }" [innerHTML]=message.content>
         </div>
    </div>
</ng-container>

相关HTML没有按照建议使用的角度

<div class="messageContainer">
         <img class="icon to">
        <div class="message to" >example message where i want the icon to be in the bottom right hand corner of the div</div>
    </div>

Answer 1

始终将父div设置为relative，将子div（在本例中为包含div的图像）设置为absolute：

.chat-layout {
  position: relative;
  display: inline-block 
}

.corner-image{
  position : absolute;
  display: inline-block;
  right: 0;
  bottom: 0;
}

提示：请注意包含div的文本有正确的填充或z-index ...

Answer 2

最简单的解决方案是在父级的右侧创建一个空格，并为父级position:relative。比使用position:absolute; bottom: 0;和right: 0（甚至是负值以使孩子脱离父母的背景区域）。

这是一个基本的例子：

＆＃13;

.parent {
  background-color: #eee;
  margin: 1rem 4rem 1rem .5rem;
  position: relative;
  min-height: 4rem;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 1rem 1rem 0;
}
.icon {
  width: 3rem;
  height: 3rem;
  position: absolute;
  background-color: #999;
  border-radius: 1.5rem;
  bottom: 0;
  right: -3.5rem;
}


/* rest is just adding some style, you don't need it. couldn't help it :) */

body {
  background-color: #f9f9f9;
}
.icon {
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 1px 0 rgba(0,0,0,.07), 0 2px 1px -1px rgba(0,0,0,.06);
  transition: box-shadow .3s cubic-bezier(.4,0,.2,1), bottom .3s cubic-bezier(.4,0,.2,1);
}

.parent:hover {
  background-color: #e9e9e9;
}
.parent:hover .icon {
  bottom: .2rem;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.1), 0 6px 10px 0 rgba(0,0,0,.07), 0 1px 18px 0 rgba(0,0,0,.06);
}

＆＃13;

<div class="parent">
  <div class="icon"></div>
  Lorem ipsum dolor sit amet.
</div>
<div class="parent">
  <div class="icon"></div>
  LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit ut aliquam purus sit amet. Nisl nisi scelerisque eu ultrices. Elementum integer enim neque volutpat ac tincidunt vitae semper. Vestibulum morbi blandit cursus risus at ultrices mi. Ut diam quam nulla porttitor massa id neque. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Nisl purus in mollis nunc sed id semper risus. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Lorem ipsum dolor sit amet. Cursus metus aliquam eleifend mi. Dictumst quisque sagittis purus sit. Vel pharetra vel turpis nunc eget lorem dolor sed.
</div>
<div class="parent">
  <div class="icon"></div>
  Lorem ipsum dolor sit amet.
</div>
<div class="parent">
  <div class="icon"></div>
  Nisl purus in mollis nunc sed id semper risus. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Lorem ipsum dolor sit amet. Cursus metus aliquam eleifend mi. Dictumst quisque sagittis purus sit. Vel pharetra vel turpis nunc eget lorem dolor sed.
</div>
<div class="parent">
  <div class="icon"></div>
  Volutpat lacus laoreet non curabitur gravida. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Pellentesque nec nam aliquam sem. Pellentesque diam volutpat commodo sed egestas egestas fringilla. At elementum eu facilisis sed odio. Eu tincidunt tortor aliquam nulla facilisi. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Eget egestas purus viverra accumsan in. Odio ut sem nulla pharetra diam sit amet nisl suscipit. Suscipit tellus mauris a diam maecenas sed enim ut sem. Dictum fusce ut placerat orci nulla pellentesque dignissim. Viverra nam libero justo laoreet sit amet cursus sit. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Rhoncus est pellentesque elit ullamcorper dignissim cras. Ut etiam sit amet nisl purus in mollis nunc sed. Gravida cum sociis natoque penatibus et magnis dis. Amet venenatis urna cursus eget nunc scelerisque viverra.
</div>

＆＃13;

如何将动态div中的图像浮动到div的右下角？

2 个答案: