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

【问题标题】：How to position a callout/speech bubble box inline如何定位标注/语音气泡框内联
【发布时间】：2014-09-18 15:49:04
【问题描述】：

我正在使用这个 CSS 语音气泡生成器在页面右侧制作一个标注框（框左侧的语音/标注三角形） http://html-generator.weebly.com/css-speech-bubble-generator.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;
}

【问题讨论】：

也分享您的 HTML 部分。
糟糕，忘记了，谢谢！刚刚添加它（它只是一行。）

标签： css position css-position flow

【解决方案1】：

找到了解决方案——我终于将位置改为“绝对”，一切都运行良好！

【讨论】：