0

我想有两个buble 演讲一起和一些额外的信息。下图

图片

这是我这样做的代码：我在这里有一个演示：http: //jsfiddle.net/pZh4w/

<style>
.bubble 
{
position: relative;
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
}

.test
{
    margin-bottom: 0px;
    margin-left: 850px;
}
.test1
{
    margin-bottom: 20px;
    margin-left: 850px;
}

.tes
{
    margin-bottom: 0px;
    margin-left: 250px;
}
.tes1
{
    margin-bottom: 20px;
    margin-left: 250px;
}
</style>

谢谢你的帮助。

4

1 回答 1

0

这里有一些东西可以帮助您入门。

我建议使用以下 HTML：

<div class="bubble">
    <p>First paragraph</p>
    <div class="caption">
         <h1>By PEDE</h1>
         <h2>From Belgrade,MT</h2>
         <h3>September 25,2013</h3>
    </div>
</div>

并从以下 CSS 开始：

.bubble-panel {
    display: inline-block;
    border: 1px dotted #CCCCCC;
    height: 250px;
    position: relative;
    margin: 20px;
}
.bubble {
    width: 525px;
    height: 130px;
    padding: 4px;
    background: #FFFFFF;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
    border: #46A5E4 solid 9px;
    display:inline-block;
}
.caption {
    border: 1px solid red;
    width: 20em;
    font-size: 14px;
    line-height: 1.5;
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.caption h1, .caption h2, .caption h3 {
    font-size: 1.00em;
    text-align: center;
    margin: 0;

}

参见演示：http: //jsfiddle.net/audetwebdesign/rcNN6/

最终结果如下：

在此处输入图像描述

语音气泡装饰（突出的小三角形）可以按照以下网址中提出的想法构建：http: //nicolasgallagher.com/pure-css-speech-bubbles/demo/

诀窍是将气泡和标题文本包装在固定高度的内联块包装器中。如果屏幕足够宽，这些可以形成 2x2 网格。

于 2013-09-30T19:43:15.753 回答