Css 如何内联定位标注/语音气泡框

我正在使用这个CSS语音气泡生成器在页面的右侧创建一个标注框，并在框的左侧创建语音/标注三角形

我需要将它放置在另一个

的右侧，但我所做的任何尝试都不会使它按我需要的方式运行。当我将它定位为固定时，它当然会在页面上下滚动，这是不好的。当我将其向右浮动时，它与左侧的

不够近，除非窗口足够小。我认为将其定位为内联将是最好的选择，但当我将位置从“相对”更改为“内联”时，标注的三角形部分将消失。有解决办法吗

注意

---

找到了解决方案——我最终将位置改为绝对位置，一切正常

也分享你的HTML部分。哦，忘了，谢谢！只是加了一行而已。

.bubble {
position: relative;
width: 200px;
height: 310px;
padding: 14px;
background: #FFFFFF;
border: #cfcfcb solid 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.bubble:after {
content: "";
position: absolute;
top: 16px;
left: -39px;
border-style: solid;
border-width: 16px 39px 16px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
}

.bubble:before {
content: "";
position: absolute;
top: 13px;
left: -46px;
border-style: solid;
border-width: 19px 42px 19px 0;
border-color: transparent #cfcfcb;
display: block;
width: 0;
z-index: 0;
}