css - 如何内嵌标注/语音气泡框

标签 css layout position css-position

我正在使用这个 CSS 语音气泡生成器在页面的右侧制作一个标注框(语音/标注三 Angular 形位于框的左侧) http://html-generator.weebly.com/css-speech-bubble-generator.html

我需要将它定位到另一个

的右侧,但我尝试过的任何方法都无法使其按照我需要的方式运行。当我将它定位为固定时,它当然会在页面上下滚动,这是不好的。当我将它向右浮动时,它离左边的
不够近(除非窗口足够小)。我认为将它定位为内联是最好的选择,但是当我将位置从相对更改为内联时,标注的三 Angular 形部分消失了。任何解决方案来解决这个问题?

注意力
.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;
}

最佳答案

找到解决方案——我终于将位置改为“绝对”,一切正常!

关于css - 如何内嵌标注/语音气泡框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24978615/

相关文章:

asp.net - 我的 asp.net 面板上的水平滚动条不会滚动

javascript - 将我的数据库中可用的 pdf 上传到我的服务器

javascript - 列布局 - 如何设置文本字段宽度

r - 在 Shiny 中对输入小部件进行分组

HTML-CSS : overlapping items with same center?

html - 全宽图像上的相对定位

jQuery show 函数有时应用内联 block 并阻止其他 block ?

javascript - 取消选中要执行的元素javascript

html - 无法将页眉和页脚扩展到整个浏览器长度

c# - 如何在包装面板中设置两个对齐方式