Question

我正在尝试制作聊天应用，并需要聊天气泡以紧密贴合其内容。它适用于文本，但是当我在泡泡中有图像时会出现问题。这是我正在使用的HTML

<div class="fromMe msgBubble">
    <img src="{{image.location}}" style="width:50%;">
    <br>
    <span class="msgDate">2011-01-26 01:52:16</span>
</div>
<div class="clearfix"></div>

然而，当我加载图像时，我将一大堆填充物移到图像的一侧，并且div没有紧紧地环绕图像。它看起来像这样：

http://imgur.com/R3j7yO2

更新：我发布了一个带有代码和CSS的JS小提琴。 https://jsfiddle.net/dw9aek2y/

如何紧贴图片周围的聊天气泡？谢谢！

Answer 1

删除宽度并添加最大宽度，每件事都可以

＆＃13;

overflow:hidden

＆＃13;

#messageBubbleArea {
    font: 14px Arial;
    margin-top: 20px;
    padding: 0 10px;
    width: 99%;
}

.fromMe::before {
    border-bottom: 9px solid #0b93f6;
    border-right: 9px solid rgba(0, 0, 0, 0);
    bottom: 0;
    content: "";
    position: absolute;
    right: -8px;
}

*::after, *::before {
    box-sizing: border-box;
}

.fromMe {
    background-color: #0b93f6;
    border-radius: 8px 8px 0;
    color: white;
    float: right;
    margin-left: auto;
    text-align: right;
}

.fromThem, .fromMe {
    clear: both;
    margin-top: 20px;
    max-width: 80%;
    padding: 5px 9px;
    position: relative;
}

＆＃13;

图像周围的紧密贴合

1 个答案: