CSS 语音气球宽度

Question

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

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

你会看到气球和之前的气球在同一条水平线上，这又丑又奇怪。我希望气球一个接一个地（一个在另一个下面）保持不变，即使消息很小，就像一个简单的 'Hi'... 我应该更改或添加气球类的哪些属性才能得到这个？

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
}

CSS 语音气球宽度

CSS Speech balloon width

html

css

css-shapes