CSS가있는 동적 높이

Question

댓글 페이지를 작성하고 있습니다. 나는 모든 코멘트가있는 json을 가지고있다.이 코멘트는 하나의 버블 스피치로 들어간다. 문제는 의견이 크기가 다양 할 수 있으며 의견의 크기에 따라 풍선 연설을하고 싶습니다. 당신이 정렬되지 않은 거품 연설의 상단을 볼 수 있듯이 예

. 여기에 데모가 있습니다 : http://jsbin.com/uLuvaWU/1.

나는 버블 스피치에 많은 공백이 있었기 때문에 동적으로 변경하기로 결정했습니다. 예 : 내 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; 

} 

Answer 1

에서 변경해야 할 것 http://jsbin.com/OrIWAr

확실하지 난 당신의 CSS에 약간에게 클래스 .bubble-panel을 변경했습니다. 크롬, 파이어 폭스 사파리와 기포 speechs 위에 테스트

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

(http://jsbin.com/uLuvaWU/2)

이제 정렬된다.