我的主要问题是如何让前景气泡(蓝色)在所有条件下都略低于背景气泡的右侧?
我试过用不同的方式将对象重叠在一起...具体使用以下方式:
- 利用负利润率
- 绝对/相对定位和 z-index
但是,我无法获得一种在“所有条件”下都有效并使文本气泡保持“完整”的组合。 (见下面的注释)
具体来说,我面临的条件是:
- Different Text Lengths --- 当前作为“Some Title”写入的文本是自动生成的,并且可能非常大(即字符数),因此气泡需要调整为不同的行数(1-5)。
- 不同的浏览器大小 --- 我希望文本气泡根据浏览器的大小进行调整,而不是它们之间的距离。
另请注意:
- 我使用的是最新版本的 Twitter Bootstrap。
- 我在文本气泡上使用了特定的前后伪元素,因此它们的小提示被放置在看起来美观的位置。当我尝试上面的第二种方法来解决问题时,这些往往会搞砸。
如果您可以使文本气泡上的提示看起来更好,则加分;)
这是我的 html:
<div>
<div id="head-names">
<h2>
Person A
</h2>
<h2>
Person B
</h2>
</div>
<div align="center">
<h2 class="text-bubble background-bubble">
<p>Some Title</p>
</h2>
<h2 class="text-bubble foreground-bubble">
<p>Some Title</p>
</h2>
</div>
</div>
还有我的CSS:
#head-names {
display:flex;
align-items: center;
justify-content: space-around;
flex-wrap:wrap;
}
.text-bubble {
position:relative;
text-align : center;
border-radius:30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
max-width:650px;
padding: 10px 20px;
margin: 0 0 20px;
}
.text-bubble:before {
content:"";
position:absolute;
width: 0;
height:0;
border-style:solid;
}
.text-bubble:after {
content:"";
position:absolute;
border-style:solid;
display:block;
width: 0;
}
.foreground-bubble {
background-color: #ADD8E6;
border: 6px solid #666;
left:2%;
}
.foreground-bubble:before {
bottom:100%;
left:13%;
border-color: transparent transparent #666 #666;
border-width: 30px 30px 30px 30px;
}
.foreground-bubble:after {
bottom:100%;
left:15%;
border-color: transparent transparent #ADD8E6 #ADD8E6;
border-width: 18px 18px 18px 18px;
}
.background-bubble {
background-color: #fff;
border: 6px solid #666;
left:-2%;
color:transparent;
margin-bottom:-17%;
}
.background-bubble:before {
bottom:100%;
left:80%;
border-color: transparent #666 #666 transparent;
border-width: 30px 30px 30px 30px;
}
.background-bubble:after {
bottom:100%;
left:82.5%;
border-color: transparent #fff #fff transparent;
border-width: 18px 18px 18px 18px;
我的代码可以在这里找到:http://jsfiddle.net/aZ6bE/
链接到一些线框/样本图像,我希望它如何缩放:http://ge.tt/2puJ7Hh1/v/0?c
最佳答案
对于定位,我删除了 .background-bubble
margin-bottom:-17%
并添加了 top:-100px
到 .foreground-bubble
因为它的 position:relative
。
我还为包装 div 提供了一个新类“bubbles”并添加了 margin-top:50px
以将其向下移动一点,这样提示就不会与文本发生冲突。
根据气泡的提示我改了:
- 大三 Angular 形的大小(
border-width
) - 百分比 -> 像素
- (背景气泡)左 -> 右
这是 JSFiddle
我还建议您将一些 CSS 组合到新类中以减少冗余。
例如提示的 border-width
和 bottom:100%
。
关于css - 如何覆盖/重叠两个用 css 设计的 div 看起来像文本气泡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23690770/