我正在使用这个 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/