Html 对齐与CSS不一致

我正在做一个评论页面，但现在我有一个问题，那就是泡泡演讲的对齐方式不一致

范例

我想这个问题可以用CSS解决，但不是很确定。 我这里有我的演示

提前谢谢

这是我的css

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


.bubble 
{
position: relative;
width: 535px;
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;

}

.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: 15px;
    right: 50px;
}
.caption h1, .caption h2, .caption h3 {
    font-size: 1.00em;
    text-align: left;
    margin: 0;

}

---

这就是你想要的吗

看到这个了吗

我添加了

垂直对齐：中间

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

}

将
float:left
添加到
。气泡面板

.bubble-panel {
display: inline-block;
float: left;
height: 250px;
position: relative;
margin: 20px;
}

那个橙色矩形div是什么？您需要为
div
添加
clear:both
，然后添加。橙色不是图像的一部分。我想文本行是在推气泡。检查你的标签，你会错过代码上的某个地方
.bubble-panel {
display: inline-block;
float: left;
height: 250px;
position: relative;
margin: 20px;
}