html - CSS 语音气球宽度

Question

我相信对于了解 CSS 语言的人来说，这是一个非常基本的问题(不是我的情况，哈哈)。我正在使用 this code托管在 jsfiddle 以在我的网站上制作一些语音气球。当气球内的消息很少时，问题就来了。例如，在上面发布的代码中，将代码从“bubble you”气球更改为:

<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
}