0

我正在做一个评论页面。我有一个包含所有评论的 json，这些评论包含在一个气泡演讲中。问题是评论可以改变它们的大小，我想根据评论的大小来制作气泡语音。一个例子

在此处输入图像描述

如您所见，气泡顶部的语音未对齐。这是演示：http: //jsbin.com/uLuvaWU/1。

我决定更改为动态，因为我在一些泡泡演讲中有很多空白。示例：http: //jsbin.com/OrIWAr

不知道我必须从我的 CSS 中改变什么

.bubble-panel {
    display: inline-block;
    border: 1px dotted #CCCCCC;
    height: 350px;
    position: relative;
    margin: 20px;
}


.bubble 
{
position: relative;
width: 350px;
height: auto;
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;
vertical-align: middle; /* ADD THIS LINE */
}

.bubble p
{
    margin: 10px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 14px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -14px;
bottom: -31px;
left: 20%;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 39px 22px 0;
border-color: #46A5E4 transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -22px;
bottom: -48px;
left: 20%;
}
.caption {
    //border: 1px solid red;
    width: 20em;
    font-size: 14px;
    line-height: 1.5;
    position: absolute;
    bottom: auto;
    right: 0px;
}
.caption h1, .caption h2, .caption h3 {
    font-size: 1.00em;
    text-align: left;
    margin: 0;

}
4

1 回答 1

2

我.bubble-panel在你的 CSS 上改变了一些类。( http://jsbin.com/uLuvaWU/2 )

 .bubble-panel {
    display: inline-block;
    border: 1px dotted #CCC;
    height: 350px;
    position: relative;
    margin: 20px;
    top: 0;
    float: left;
  }

在 Chrome、Firefox 和 Safari 上进行了测试，气泡顶部的语音现在已对齐。

于 2013-10-01T22:10:28.443 回答