動態高度與CSS

我正在做一個評論頁面。我有一個json的所有評論，這個評論發表在一個泡沫演講中。問題是評論可能會改變其大小，我希望根據評論的大小進行泡沫演講。一個例子動態高度與CSS

enter image description here

正如你可以看到氣泡的講話不對齊的頂部。這裏是演示：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; 

}

來源

2013-10-01 Diego

改變我已經改變了一下類.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和氣泡speechs的頂部現在對齊。

來源

2013-10-01 22:10:28

動態高度與CSS

回答

相關問題