CSS DIV动态向上增长

Question

基本上，我正在制作一款游戏。 在我的游戏中，我希望玩家能够相互交流。你有一个角色，当你说话时，你的文本会出现在角色上方的说话气泡div中。

我的困境是，当我在气泡中键入太多文本时，气泡会扩展到角色上方。因此，我希望气泡向上增长。我一直在尝试想出一种在JS和CSS中实现这种效果的方法，但我不得不放弃并向你们求助。

这是一个例子： http://jsfiddle.net/tDrNN/

HTML

<div class="wrapper">
    <div class="character1" style="position: absolute; top: 124px; left: 392px; width: 36px; height: 36px; background-color: blue;">
        <div class="bubble"><span>Hi my name is Mads</span></div>
    </div>


    <div class="character2" style="position: absolute; top: 124px; left: 192px; width: 36px; height: 36px; background-color: blue;">
        <div class="bubble"><span>Hi my name is MadsHi my name is MadsHi my name is MadsHi my name is MadsHi my name is MadsHi my name is Mads</span></div>
    </div>
</div>

CSS

.bubble {
  position: relative;
  background-color:#eee;
  margin: 0;
  padding:2px;
  min-width:100px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
  top: -80px;
}
.bubble:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: #eee transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:1em;
}
.bubble span {
    height: auto !important;
    color: #000 !important;
    font-family: verdana;
}

- Mads Cortz Jørgensen

---

我正在构建类似的东西，遇到了完全相同的问题！ - marano

Answer 1

这是一个已经编辑过的代码片段：http://jsfiddle.net/Z8fg3/。需要注意两个主要的区别：类“bubble”也是绝对定位（像字符一样），而且它的底部不是指定了一个“top”，而是设置为字符高度的“bottom”（再加上箭头和其他东西的一些填充）。我将其中一个角色移动了一下，以适应气泡并展示它粘附在气泡上的效果。

- psg-1

---

我刚刚解决了这个问题，就在5秒钟前！ :-) 但非常感谢您先生！http://jsfiddle.net/Tdpqe/ - Mads Cortz Jørgensen

Answer 2

我觉得您可以将气泡的容器设置为相对定位，并将气泡设置为绝对定位，底部为0，并添加足够的 margin-bottom 使其不再在其容器（人物）之上...它应该向上扩展而不是向下，因为它固定在容器上。但是，您的 CSS 存在很多问题，我怀疑这些内容在跨浏览器方面并不友好。请参阅此 fiddle：http://jsfiddle.net/HnezM/。

.

- Christina W