CSS语音气球宽度

Question

我相信这是一个非常基本的问题，谁知道CSS语言(不是我的案例lol)。我在我的网站上用这段代码在jsfiddle上做了一些演讲气球。当气球里的信息很少时，问题就出现了。例如，在上面发布的代码中，将代码从“冒泡气球”更改为如下所示：

<div class="bubble you">Hi.</div>

你会看到气球停留在与前一个气球相同的水平线上，这是丑陋和奇怪的。我想让气球一个接一个地停留(一个又一个)，即使信息很小，就像简单的“嗨”……为了得到这个结果，我应该更改或添加哪些属性来获得气球类？

Answer 1

将clear: both添加到.bubble。

这里的演示：

http://jsfiddle.net/sifriday/mek5Z/1957/

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    clear: both
}