Javascript 动态高度与CSS
我正在做一个评论页面。我有一个包含所有注释的json,这些注释在一个气泡演讲中。问题是评论的大小可能会有所不同,我想根据评论的大小来制作泡沫演讲。 一个例子 正如你所看到的,气泡的顶部没有对齐。这是演示: 我决定改成动态,因为我在一些冒泡的演讲中有很多空白。例如: 不确定我必须从CSS中更改什么Javascript 动态高度与CSS,javascript,html,css,Javascript,Html,Css,我正在做一个评论页面。我有一个包含所有注释的json,这些注释在一个气泡演讲中。问题是评论的大小可能会有所不同,我想根据评论的大小来制作泡沫演讲。 一个例子 正如你所看到的,气泡的顶部没有对齐。这是演示: 我决定改成动态,因为我在一些冒泡的演讲中有很多空白。例如: 不确定我必须从CSS中更改什么 .bubble-panel { display: inline-block; border: 1px dotted #CCCCCC; height: 350px; po
.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;
}
我对CSS上的类
.bubble panel
做了一些更改。
()
在Chrome、Firefox和Safari上进行了测试,现在气泡顶端的演讲已经对齐
.bubble-panel {
display: inline-block;
border: 1px dotted #CCC;
height: 350px;
position: relative;
margin: 20px;
top: 0;
float: left;
}