Aligment與CSS

Question

不一致我正在做一個評論頁面，但現在我有一個問題，即泡沫演講的對齊錯位。

例

我想這CA固定用CSS，但不能肯定。 我有我的演示這裏http://jsfiddle.net/bSaJc/

在此先感謝

這是我的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; 

} 

Answer 1

看到這個DEMO

我加vertical-align: middle;

.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 */ 

} 

Answer 2

這是你想要的東西？

http://jsfiddle.net/cfknoop/bSaJc/1/

vertical-align:top; 

Answer 3

添加float:left到.bubble-panel

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

DEMO