HTML语音泡标记
HTML语音泡标记
提问于 2011-08-03 18:30:33
fyi:我正在为一些语音气泡编写HTML标记。
造成这种复杂标记的原因是，随着其内容的增加，“语音泡沫”应该会增长。
首先，我最近的标记是：
<div class="speachbubble">
<div class="topbar">
<div class="corner top-left"></div>
<div class="top"></div>
<div class="corner top-right"></div>
<div class="clear"></div>
</div>
<div class="middlebar">
<div class="left"></div>
<div class="content">HERE iS SOME TEXT</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="bottombar">
<div class="corner bottom-left"></div>
<div class="bottom"></div>
<div class="corner bottom-right"></div>
<div class="clear"></div>
</div>
在我上传的图片中，你可以在左边看到整个气泡。右边显示分裂的图形。因此，气泡中的内容在长度上保持动态。
我在复杂的CSS方面很差，也许有人能帮我？:(非常感谢！)
PS:所有这些应该在没有CSS3的情况下编写！
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-08-03 19:00:59
您不需要复杂的标记来使其与文本“增长”；使用语音气泡实际上并不是CSS3 (除了圆角)。下面的示例都是CSS1，但“：后置”选择器除外，它是CSS2
看看这把小提琴：http://jsfiddle.net/FbHVk/3/
或者查看下面的代码html和css：
HTML：
<span class="bubble"> this is some text</span>CSS：
.bubble{
position:relative;
padding: 10px;
background: #AAAAFF;
}
.bubble:after{
position:absolute;
content: "";
top:15px;right:-10px;
border-width: 10px 0 10px 15px;
border-color: transparent #AAAAFF;
border-style: solid;
}Stack Overflow用户
发布于 2011-08-03 18:44:03
你为什么要用一些jQuery和它的插件
它也节省了您的时间，尝试如下：
qTip
Stack Overflow用户
发布于 2011-08-03 18:57:37
在理论上，你只需要顶部和底部的酒吧。如果你把图片放在中间，它就不会与文字一起正常生长。让你的整个顶部栏一个图像，你的底部栏另一个，并将它们分别设置为topbar和bottombar的背景。然后，您需要为speechbubble定义一个宽度，等于用于topbar和bottombar的图像的宽度。从您将在右边和左边使用的图像中获取宽度，并将它们分别作为padding-right和padding-left放在文本中。这将使您能够保持圆角效果，并使您的内容增长。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6931374
复制相关文章
相似问题
腾讯云开发者
