将两个css元素放在一起

Question

我希望有两个无聊的演讲聚会和一些额外的信息。 图片

这是我执行此操作的代码： 我在这里有一个演示：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>  

感谢您的帮助。

Answer 1

这是让你入门的东西。

我建议使用以下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网格。