css div动态向上增长 [英] css div grow upwards dynamically

问题描述

基本上，我正在构建游戏。
在我的游戏中，我不希望玩家能够互相交谈。你有一个数字，当你说话的时候，你的文字就会出现在你的角色上的说话气泡。

Basically, i'm building a game. In my game I wan't the players to be able to speak with each other. You have a figure, and when you speak, your text goes in a speak bubble div over your character.

我的困境是，当我输入很多文字时泡沫，泡沫扩展到角色。所以我希望泡沫能够向上发展。我一直试图想办法在JS和CSS中做到这一点，但我不得不放弃并问你们。

My dilemma is, that when i type to much text in the bubble, the bubble expands over the character. So i want the bubble to grow upwards. I've been trying to think of a way to do this in both JS and CSS, but i'd had to give up and ask you guys.

这是一个例子：
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;
}

推荐答案

这是一个经过编辑的小提琴：< a href =http://jsfiddle.net/Z8fg3/ =nofollow> http://jsfiddle.net/Z8fg3/

Here's an edited fiddle: http://jsfiddle.net/Z8fg3/

请注意两个主要区别：类 bubble 也是绝对定位的（如字符），而不是指定 top ，它的底部等于角色的高度（加上箭头和东西的一些填充）。

Notice two main differences: the class bubble is also absolutely positioned (like the character), and, instead of specifying a top, it has a bottom equal to the height of the character (plus some padding for the arrow and stuff).

（我移动了其中一个角色以适应气泡，并表明无论如何都坚持它。）

(I moved one of the character both to fit the bubble and to show that it sticks to it regardless.)

这篇关于css div动态向上增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！